axios 请求拦截器&响应拦截器

一、 拦截器介绍

一般在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。

1. 请求拦截器
   在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；
2. 响应拦截器
   同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。

二、 Axios实例

1. 创建axios实例

// 引入axios
import axios from 'axios'

// 创建实例
let instance = axios.create({
    baseURL: 'xxxxxxxxxx',
    timeout: 15000  // 毫秒
})

2. baseURL设置：

let baseURL;
if(process.env.NODE_ENV === 'development') {
    baseURL = 'xxx本地环境xxx';
} else if(process.env.NODE_ENV === 'production') {
    baseURL = 'xxx生产环境xxx';
}

// 实例
let instance = axios.create({
    baseURL: baseURL,
    ...
})

3. 修改实例配置的三种方式

// 第一种：局限性比较大
axios.defaults.timeout = 1000;
axios.defaults.baseURL = 'xxxxx';

// 第二种：实例配置
let instance = axios.create({
    baseURL: 'xxxxx',
    timeout: 1000,  // 超时，401
})
// 创建完后修改
instance.defaults.timeout = 3000

// 第三种：发起请求时修改配置、
instance.get('/xxx',{
    timeout: 5000
})

这三种修改配置方法的优先级如下：请求配置 > 实例配置 > 全局配置

三、 配置拦截器

// 请求拦截器
instance.interceptors.request.use(req=>{}, err=>{});
// 响应拦截器
instance.interceptors.reponse.use(req=>{}, err=>{});

从上可以看出，instance依然是第二步中创建的实例，然后对其进行拦截，请求用request，响应用reponse，二者都有两个配置项，一个是成功配置，一个是error配置。

1. 请求拦截器

// use(两个参数)
axios.interceptors.request.use(req => {
    // 在发送请求前要做的事儿
    ...
    return req
}, err => {
    // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})

2. 响应拦截器

// use(两个参数)
axios.interceptors.reponse.use(res => {
    // 请求成功对响应数据做处理
    ...
    // 该返回的数据则是axios.then(res)中接收的数据
    return res
}, err => {
    // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})

3. 常见错误码处理(error)
   axios请求错误时，可在catch里进行错误处理。

axios.get().then().catch(err => {
    // 错误处理
})

但实际开发过程中，一般在请求/响应拦截器中统一做错误处理，有特殊接口的话做单独的catch错误处理。

四、 axios请求拦截器的案例

axios请求发送之前，拦截请求，在请求中加入从cookie中获取到的csrftoken值。以解决后端接口csrf验证问题。

如下，可以在vue项目的src目录下新建一个axios_instance.js文件，用于创建一个axios实例和进行相关配置。

import axios from 'axios'

// 创建一个axios实例
const axios_instance = axios.create()

// 设置axios拦截器：请求拦截器
axios_instance.interceptors.request.use(config => {
  //请求拦截一般会有哪些操作
  // 1.比如config中的一些信息不符合服务器的要求,这里可以做一些修改
  // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标(然后再响应拦截中取消显示)
  // 3.某些网络请求必须携带一些特殊的信息(如登录token),如果没有携带就可以拦截并作响应提示

  // 给请求头添加token
  /*
  * 其中   /.*csrftoken=([^;.]*).*$/    是一个正则表达式，用于从cookie中获取csrftoken的值 ，
  * ([^;.]*) 是命名捕获，表示从匹配到的内容中 只获得 ()内的值。
  * string.match(regex) 得到的是一个数组， 第0项是匹配到的全部内容，第1项是通过命名捕获得到的内容，在这里就是csrftoken的值。
  * 这样就完成了使用axios发送请求的正确配置了，同时保证了网站免受csrf攻击的影响.
  */
  config.headers['X-Requested-With'] = 'XMLHttpRequest';
  let regex = /.*csrftoken=([^;.]*).*$/; // 用于从cookie中匹配 csrftoken值
  config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
  return config
}, err => {
  // 请求未成功发出，如：没有网络...
  return Promise.reject(err)
})

/*
// 设置axios拦截器: 响应拦截器
axios_instance.interceptors.response.use(res => {
  // 成功响应的拦截
  return Promise.resolve(res.data)
}, err =>{
  // 失败响应的拦截
  console.log(err)
  if(err.response){
    // 失败响应的status需要在response中获得
    console.log(err.response)
    switch(err.response.status){
      // 对得到的状态码的处理，具体的设置视自己的情况而定
      case 401:
          console.log('未登录')
          window.location.href='/'
          break
      case 404:
          window.location.href='/'
          break
      case 405:
          console.log('不支持的方法')
          break
      // case ...
      default:
          console.log('其他错误')
          break
    }
  }
  // 注意这里应该return promise.reject(),
  // 因为如果直接return err则在调用此实例时，响应失败了也会进入then(res=>{})而不是reject或catch方法
  return Promise.reject(err)
})
*/


export {
  axios_instance
}

如此，
在需要拦截请求or响应的地方，就可以使用新建的axios实例来发起异步请求；
而不需要拦截请求/响应的地方，就可以直接使用axios来发起异步请求！！！