Axios

1 默认配置

const axios = require('axios');
// 常用默认配置
axios.defaults.method = 'GET';//设置默认的请求类型为 GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
axios.defaults.params = {id:100};
axios.defaults.timeout = 3000;//3s后无响应则取消请求

2 创建axios实例

项目中有部分接口需要的配置与另一部分接口需要的配置不太一样。创建不同的axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中。

//创建实例对象  /getJoke
const a = axios.create({
    baseURL: 'https://api.apiopen.top',
    timeout: 2000
});

const b = axios.create({
    baseURL: 'https://b.com',
    timeout: 2000
});

a.get('/getJoke').then(response => {
            console.log(response.data)
        })

3 拦截器

调用 axios()并不是立即发送 ajax 请求, 而是需要经历一个较长的流程

// 设置请求拦截器  config为配置对象
axios.interceptors.request.use(function (config) {
    console.log('请求拦截器 成功 - 1号');
    //修改 config 中的参数
    config.params = {a:100};
    //将修改后的请求参数返回
    return config;
}, function (error) {
    console.log('请求拦截器 失败 - 1号');
    return Promise.reject(error); // 返回失败的Promise，之后通过.catch处理
});

axios.interceptors.request.use(function (config) {
    console.log('请求拦截器 成功 - 2号');
    //修改 config 中的参数
    config.timeout = 2000;
    return config;
}, function (error) {
    console.log('请求拦截器 失败 - 2号');
    return Promise.reject(error);
});

// 设置响应拦截器
axios.interceptors.response.use(function (response) {
    console.log('响应拦截器 成功 1号');
    // 此时返回的响应就只有数据
    return response.data;
    // return response;
}, function (error) {
    console.log('响应拦截器 失败 1号')
    return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
    console.log('响应拦截器 成功 2号')
    return response;
}, function (error) {
    console.log('响应拦截器 失败 2号')
    return Promise.reject(error);
});

//发送请求
axios({
    method: 'GET',
    url: 'http://localhost:3000/posts'
}).then(response => {
    console.log('自定义回调处理成功的结果');
    console.log(response);
});

执行顺序：请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响应拦截器 2 => 请求的回调

请求拦截器是将拦截函数unshift到数组，响应拦截器是将拦截函数push到数组

4 取消请求

取消方式有两种：一.连续多次点击时，取消上一次发送的请求；二.直接点击取消按钮

//发送请求
btns[0].onclick = function(){
    //检测上一次的请求是否已经完成
    if(cancel !== null){
        //取消上一次的请求
        cancel();
    }
    axios({
        method: 'GET',
        url: 'http://localhost:3000/posts',
        //1. 添加配置对象的属性
        cancelToken: new axios.CancelToken(function(c){ //这个参数c就是CancelToken构造函数里面自带的取消请求的函数，这里把该函数当参数用
            //2. 将 c 的值赋值给 cancel
            cancel = c;
        })
    }).then(response => {
        console.log(response);
        //3.将 cancel 的值初始化
        cancel = null;
    })
}

//绑定第二个事件取消请求
btns[1].onclick = function(){
    // 4.调用cancel取消请求
    cancel();
}

取消后，在响应拦截器有如下返回

axios请求取消的响应.png

5 请求超时设置

5.1 全局超时设置

axios.defaults.timeout = 30000;

5.2 单独设置超时


let timeout = parseInt(paramsTimeout);
this.$axios.post(url, params, {timeout: timeout})
  .then(res => {
    console.log('response='+response);
  })
  .catch(reason => { // 如果请求超时，会返回一个失败的Promise(通常再响应拦截器中产生)，然后用.catch处理
    console.log('reason'+reason);
  })
}

5.3 超时处理

如果设置了超时，并且请求的确超时。则通过响应拦截器得到的失败响应如下：

超时的响应.png

在响应拦截器上设置：

axios.defaults.timeout = 2000
axios.interceptors.response.use(function(response){
    return response
},function(resason){
    if(reason.code==='ECONNABORTED'){
        alert('请求超时')
    }
    return Promise.reject(resason)
})
axios.get('http://localhost:3000/').then((resolve)=>{
    console.log(resolve);
}).catch(reason=>{
    console.log(reason);
})

Axios基本配置