Axios

基本使用

//引入axios的js文件，npm或者手动引入等等
btn.onclick = function(){
    axios({
        method: 请求方式,
        url: 请求地址,
        data: 请求体,
    }).then(res => {
        成功的回调操作
    })
}

axios.get()就是请求方式为get的方法，语法糖

默认配置

axios.defaults.method = 'GET';
axios.defaults.baseURL = 'http://localhost';//设置基础的url，后续可以直接写在这个基础上的请求路径
axios.defaults.params = {id=100};//请求参数会默认带上这个
axios.defaults.timeout = 3000;//请求时限

创建实例对象

const axios1 = axios.create({
    //进行基本的配置信息
});
//可以使用axios1来进行操作，和原生的axios基本相同。该方法适用于不同的服务有不同的配置

拦截器

//设置请求拦截器
axios.interceptors.request.use(function (config){//1
    console.log('xxx');
    //修改config，就是可以修改config，比如请求参数
    return config;
}, function (error){
    console.log('aaa');
    return Promise.reject(error);
});
axios.interceptors.request.use(function (config){//2
    console.log('yyy');
    return config;
}, function (error){
    console.log('aaa1');
    return Promise.reject(error);
});

//设置响应拦截器
axios.interceptors.response.use(function (response){//3
    console.log('iii');
    //处理原本的响应体，比如只要data
    return response;
}, function (error){
    console.log('bbb');
    return Promise.reject(error);
});
axios.interceptors.response.use(function (response){//4
    console.log('jjj');
    return response;
}, function (error){
    console.log('bbb1');
    return Promise.reject(error);
});

//实际调用
axios({
    url:
    method:
}).then(res => {//成功处理
    处理
})。catch(res => {//失败处理
    处理
})
//执行顺序： 2-1-3-4-自定义的处理

取消请求

//2.声明全局变量
let cancel = null;
btn[0].onclick = function(){
    //优化，在发送新请求之前检测上一次请求是否完成
    if(cancel != null){
        //取消上一次的请求
        cancel();
    }
    
    axios({
        method: 'get',
        url: 'path',
        //1.添加配置对象的属性
        cancelToken: new axios.CancelToken(function(c){
            //3.将c的值赋值给cancel
            cancel = c;
        }),
    }).then(res => {
        console.log(res);
        //执行成功后，重新设置为null
        cancel = null;
    })
}

btn[1].onclick = function(){
    cancel();
}