了解使用axios拦截器

一 axios是什么

1，axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。

2，axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

3，axios 特点：
· 从浏览器中创建 XMLHttpRequests
(简单的说就是可以从URL检索数据，而不必刷新整个页面。这使网页可以更新页面的一部分，而不会中断用户的操作。)

· 从 node.js 创建 http 请求
· 支持 Promise API
· 拦截请求和响应
· 转换请求数据和响应数据
· 取消请求
· 自动转换 JSON 数据
· 客户端支持防御 XSRF

二 axios怎么用

1. 安装

npm install axios -S

2. 引入axios
   通常我们会在main.js引入axios,但是现在我们要封装一下axios
   所以在src目录下的utils目录创建一个request.js文件引入axios
   

三 axios拦截器如何配置

在请求或响应被 then 或 catch 处理前拦截它们。
拦截器分为请求拦截器和响应拦截器

请求拦截器（interceptors.requst）是指可以拦截每次或指定HTTP请求，并可修改配置项。

响应拦截器（interceptors.response）可以在每次HTTP请求后拦截住每次或指定HTTP请求，并可修改返回结果项。

1. 拦截器的基础配置
   项目目录如下：
   
   经过拦截器的方法请求
   
2. 请求拦截器

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 发送请求前做什么
    if (store.getters.token) {
      // 若是有做鉴权token,就给头部带上token
    }
    return config
  },
  error => {
    // 在此定义请求错误需要做什么
    console.log(error)
    return Promise.reject(error)
  }
)

3. 响应拦截器

// 响应拦截器
service.interceptors.response.use(
  response => {
    if(response.headers['content-disposition']) { //处理下载文件
      return response
    }
    return response.data
  },
  error => {
    const response = error.response
    //显示后台返回message
    if (!response) {
      notification.error({
        message: error || 'error'
      })
      return Promise.reject(error)
    }
    
    const { data } = response
    if (response.status === 422) {
      // 返回状态码为422则重新登录
      if (data.message === 'Signature has expired') {
        store.dispatch('user/resetToken')
        notification.error({
          message: '重新登录',
          description: 'Authorization verification failed'
        })
        setTimeout(()=>{
          if(!store.getters.token) location.reload()
        },1000)
        return Promise.reject(error)
      }
    }

    notification.error({
      message: data.message || 'error'
    })
    return Promise.reject(data.message || 'error')
  }
)

4. 移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

5. 添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

6. 取消请求
   使用取消令牌取消请求，用cancel token取消多个请求

import request from '../utils/request' // 配置过的Axios 对象
import axios from 'axios'
 
export function getLatenessDetailSize(params, that) { 
  return request({
    url: '/api/v1/behaviour/latenessDetailSize', 
    method: 'post',
    params: params,
    cancelToken: new axios.CancelToken(function executor(c) { // 设置 cancel token
      that.source = c;
    })
  })
}
 
export xxx

参考资料：axios中文文档