Vue3.0（八）：网络请求库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

js 复制代码

import axios from "axios";

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

js 复制代码

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

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

js 复制代码

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

//第二种写法，通过config写query
axios
    .get("http://xxxx", {
    params: {
        id: 500665346,
    },
})
    .then((res) => {
    console.log(res.data);
});

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

js 复制代码

//第二个参数可以直接传请求对象
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进行设置

js 复制代码

import axios from "axios"

const baseURL = "http://xxxx"
axios.defaults.baseURL = baseURL
axios.defaults.timeout = 1000

axios.get("/home").then((res)=>{
    console.log("res",res.data)
})

axios.all发送多个请求

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

js 复制代码

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

axios的创建实例

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

js 复制代码

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

但是在实际的项目开发中，有可能数据从多个不同的服务器中获取
因此我们可以通过axios创建不同的实例

js 复制代码

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对请求和响应进行拦截

js 复制代码

// 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);
  });