拦截器

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

请求拦截器

  1. axios.interceptors.request.use(config => {
  2.   // 在发送请求之前做些什么
  3.   return config;
  4. })

案例

  1. axios.interceptors.request.use(config => {
  2.             console.log(config)
  3.             config.baseURL = 'https://developer.duyiedu.com/vue';
  4.             config.timeout = 1000;
  5.             return config;
  6.         })

响应拦截器

  1. axios.interceptors.response.use(response => {
  2.   // 对响应数据做点什么
  3.   return response;
  4. })

案例 + 错误处理

  1. const instance = axios.interceptors.response.use(response => {
  2.             if (response.status === 200) {
  3.                 return response.data;
  4.             }else{
  5.                 // ....
  6.             }
  7.         }, err => {
  8.             console.log(err.request)
  9.             console.log(err.response)
  10.             if (err.response) {
  11.                 console.log('响应式报错')
  12.                 switch (err.response.status) {
  13.                     case 404:
  14.                         console.log('找不到')
  15.                         break;
  16.                     case 400:
  17.                         console.log('客户端请求的语法错误，服务器无法理解')
  18.                         break;
  19.                 }
  20.             } else if (err.request) {
  21.                 console.log('请求时报错')
  22.             } else {
  23.                 console.log('请求未发出')
  24.             }
  25.         })

移除拦截器

  1. const myInterceptor = axios.interceptors.request.use(config => {});
  2. axios.interceptors.request.eject(myInterceptor);

为axios实例添加拦截器

  1. const instance = axios.create();
  2. instance.interceptors.request.use(config => {});

取消请求

  1. const source = axios.CancelToken;
  2. const source = CancelToken.source();
  4. axios.get('/getUserInfo', {
  5.   cancelToken: source.token
  6. }).then(res => {
  7.   console.log(res);
  8. }).catch(error => {
  9.   if(axios.isCancel(error)) {
  10.     // 取消请求
  11.     console.log(error.message);
  12.   } else {
  13.     // 处理错误
  14.   }
  15. })
  17. axios.post('/user/12345', {
  18.   name: 'new name'
  19. }, {
  20.   cancelToken: source.token
  21. })
  23. // 取消请求 参数 可选
  24. source.cancel('取消请求');

错误处理

由于是promise出现错误时会被推向 reject 状态, 在请求错误时进行的处理
request / response 是error的上下文，标志着请求发送 / 得到响应
在错误中，如果响应有值，则说明是响应时出现了错误。
如果响应没值，则说明是请求时出现了错误。在错误中，如果请求无值，则说明是请求未发送出去，如取消请求。

  1. const instance = axios.interceptors.response.use(response => {
  2.             if (response.status === 200) {
  3.                 return response.data;
  4.             }else{
  5.                 // ....
  6.             }
  7.         }, err => {
  8.             console.log(err.request)
  9.             console.log(err.response)
  10.             if (err.response) {
  11.                 console.log('响应式报错')
  12.                 switch (err.response.status) {
  13.                     case 404:
  14.                         console.log('找不到')
  15.                         break;
  16.                     case 400:
  17.                         console.log('客户端请求的语法错误，服务器无法理解')
  18.                         break;
  19.                 }
  20.             } else if (err.request) {
  21.                 console.log('请求时报错')
  22.             } else {
  23.                 console.log('请求未发出')
  24.             }
  25.         })

在实际开发过程中，一般在拦截器中统一添加错误处理
请求拦截器中的错误，会当请求未成功发出时执行，但是要注意的是：取消请求后，请求拦截器的错误函数也不会执行，因为取消请求不会抛出异常，axios对其进行了单独的处理。
在更多的情况下，我们会在响应拦截器中处理错误。

axios 预检

当axios的请求为非简单请求时，浏览器会进行预检，及发送OPTIONS请求。请求到服务器，询问是否允许跨域。如果响应中允许预检中请求的跨域行为，则浏览器会进行真正的请求。否则会报405错误。