2021-07-21axios拦截器

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
常用的请求的方式：

1. get ： 获取资源
2. post ： 新增
3. put/patch： 修改
4. delete : 删除

axios的基础用法

1. get请求 : 传递参数通过 params 选项

// 第一种 通过 params 
axios.get(url, {
    params:{
        key:value
    }
}).then(res => {})

// 第二种可以使用字符串拼接
axios.get(url + '?key=value&key=value').then(res => {})

2. post请求： 传递参数是一个对象

axios.post(url, {
        key:value
    }   
}).then(res => {})

3. put请求 ： 和 post请求一样

axios.put(url, {
        key:value
    }   
}).then(res => {})

4. delete 请求：有两种形式

axios.delete(url, {
    params:{
        key:value
    }
})

// axios.delete(url, config)
axios.delete(url, {
    data:{
        {key: value}
    }
})

axios的拦截器

创建axios的实例对象

const instance = axios.create({
    baseURL:url,
})

给自定义的axios实例添加拦截器

1. 请求拦截器 ： 拦截的是所有的请求

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    //  传参的形式三种： 
    /* 
        1. 通过query传参
        config.params.key = value
        2. 通过body传参
        config.data.key = value
        3. 通过header传参
        config.headers.key=value
    */
    return config; 
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

2. 响应拦截器 : 拦截的是服务器对客户端的响应（对响应的数据进行统一的处理 以及对响应失败的统一处理）

axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });