Vue3.0（八）：网络请求库axios

网络请求库axios

axios官网

• 功能特点
  • 在浏览器中发送 XMLHttpRequests请求
  • 在node.js中发送http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据

axios请求方式

• 支持多种请求方式

  axios(config)

  axios.request(config)

  axios.get(url[, config])

  axios.delete(url[, config])

  axios.head(url[, config])

  axios.options(url[, config])

  axios.post(url[, data[, config]])

  axios.put(url[, data[, config]])

  axios.patch(url[, data[, config]])

  axios.postForm(url[, data[, config]])

  axios.putForm(url[, data[, config]])

  axios.patchForm(url[, data[, config]])

• 常见的 config配置选项

  • 请求地址（url:‘/user’）
  • 请求类型（method:‘get’）
  • 请求根路径（baseURL:‘http://www.xxx.com’）
  • 请求前的数据处理（transformRequest:[function(data){}]）
  • 请求后的数据处理（transformResponse:[function(data){}]）
  • 自定义的请求头（headers:{‘x-Requested-With’:‘XMLHttpRequest’}）
  • URL查询对象（params:{id:12}）

基本使用

• 通过 npm install axios进行安装

• 在main.js中引入axios

import axios from "axios";

• 使用 axios.request(config)发送网络请求，默认是get方法

axios.request("http://xxxxx").then((res) => {console.log(res.data);});

• 使用 axios.get(url[, config])发送网络请求

//第一种写法，把query直接写在url中axios.get("http://xxxx?id=500665346").then((res) => {console.log(res.data);});//第二种写法，通过config写queryaxios.get("http://xxxx", {params: {id: 500665346,},}).then((res) => {console.log(res.data);});

• 使用 axios.post(url[, data[, config]])发送网络请求

//第二个参数可以直接传请求对象axios.post("http://xxxxx", {username: "admin",password: "123456",}).then((res) => {console.log(res.data);});//第二个参数可以传config对象，post请求对象需要用data包裹axios.post("http://xxxx", {data: {username: "admin",password: "123456",},}).then((res) => {console.log(res.data);});

baseURL

针对于项目中的多个网络请求，我们每次写网络请求的host会显得十分麻烦，因此可以借助baseURL进行简化

• 通过 axios.defaults.baseURL进行设置

import axios from "axios"const baseURL = "http://xxxx"axios.defaults.baseURL = baseURLaxios.defaults.timeout = 1000axios.get("/home").then((res)=>{console.log("res",res.data)})

axios.all发送多个请求

• axios.all中传入一个数组，当都有结果的时候，才会调用then方法
• 实际上在axios的内部，就是调用了promise.all方法

axios.all([axios.get("http://xxxx"),axios.get("http://xxx")]).then((res)=>{console.log(res)})

axios的创建实例

• 在上面的例子中，我们通过import引入的默认实例发送的网络请求

import axios from "axios"axios.get()...

• 但是在实际的项目开发中，有可能数据从多个不同的服务器中获取

• 因此我们可以通过axios创建不同的实例

import axios from "axios"const instance = axios.create({baseURL:"http://123.456.789"})const instance = axios.create({baseURL:"http://456.789.123"})//通过创建的实例发送网络请求instance.get()instance.get()

请求和响应的拦截

• 通过 axios.interceptors.request/response对请求和响应进行拦截

// axios.interceptors.request.use(成功的回调，失败的回调)axios.interceptors.request.use((config) => {//会将请求的配置传入//1.开始loading动画//2.对原来的配置进行修改//2.1header//2.2认证登录:token/cookie//请求参数的某些转化console.log("请求成功");return config;},(err) => {console.log("请求失败了");return err;});// axios.interceptors.response.use(成功的回调，失败的回调)axios.interceptors.response.use((res) => {console.log("响应成功");//return之后的数据，会在请求后的.then中接收到return res.data;},(err) => {console.log("请求失败");return err;});axios.get("http://123.207.32.32:8000/home/multidata").then((res) => {console.log(res);}).catch((err) => {console.log(err);});