Vue3开发 axios的用法

axios是Vue官方推荐使用用于发送网络请求的工具，它同样是Vue的插件。

Vue Cli中axios的安装方式

npm install axios --save

axios的基本使用方式

import axios from "axios";

//使用发送网络请求方式一：axios(config)
//axios会创建一个Promise对象，并调用resolve与reject方法
axios({
    url:'http://123.207.32.32:8000/home/data',
    params:{
        type:'pop',
        page:1
    }
}).then(data=>{
    console.log(data);
})
//方式二：axios.get(url,config)
//方式三：axios.put(url,config)
//等等

axios 发送并发请求

import axios from "axios";

//axios发送并发请求
axios.all([
    axios({
        url:'http://123.207.32.32:8000/home/data',
        params:{
            type:'pop',
            page:1
        }
    }),
    axios({
        url:'http://123.207.32.32:8000/home/data',
        params:{
            type:'pop',
            page:2
        }
    })
]).then(result =>{
    console.log(result[0]);
    console.log(result[1]);
})
//延展格式，解构数组。结果同上面then方法的结果
// .then(axios.spread((rep1,rep2)=>{
//     console.log(rep1);
//     console.log(rep2);
// }))

axios的配置

注意：params是get请求的参数，post请求的参数是用data来传递。

使用全局配置进行网络请求

axios.defaults.baseURL = 'http://123.207.32.32:8000';
axios.defaults.timeout = 1000;//以毫秒为单位

axios({
    url:'/category'
}).then(res=>{
    console.log(res);
})

创建对应的axios的实例

const instance1 = axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:5000
})

instance1({
    url:'/home/multidata',
}).then(res=>{
    console.log(res);
})

axios实例与模块封装，一般情况下我们不应该在项目中完全依赖于第三方框架，这是避免在第三方框架出现重大bug或是停止维护之后，我们项目也会受到严重影响。故我们要对axios进行一下封装，使我们对它的依赖减至最小，即对它进行一个解耦。

//封装自己的请求方式
import axios from "axios";
export function request(config) {
    //1.创建axios的实例
    const instance = axios.create({
        baseURL:'http://123.207.32.32:8000',
        timeout:5000
    })
    return instance(config);//axios.create会返回一个Promise对象，所以这里最终返回的也就是一个Promise。
}

//使用方式
import axios from "axios";
export function request(config) {
    //1.创建axios的实例
    const instance = axios.create({
        baseURL:'http://123.207.32.32:8000',
        timeout:5000
    })
    return instance(config);
}

axios拦截器的使用

import axios from "axios";
export function request(config) {
    //1.创建axios的实例
    const instance = axios.create({
        baseURL:'http://123.207.32.32:8000',
        timeout:5000
    })

    //2.axios的拦截器。
    //request时的拦截。config中有些信息不符合服务器的格式需要拦截。
    instance.interceptors.request.use(config=>{
        console.log(config);
        return config;//请求通过就要将请求参数返回
    },err=>{
        console.log(err);
    });
    instance.interceptors.response.use(res =>{
        console.log(res);
        return res.data;//返回请求的响应结果
    },err=>{
        console.log(err);
    })
    return instance(config);
}