axios.interceptors.request.use 请求拦截器
axios.interceptors.response.use 响应拦截器

use方法接收一个参数，为一个callback函数，callback函数用来作为拦截器的处理函数
request.use方法会把 callback放在interceptors_req中，等待执行
response.use方法会把 callback放在interceptors_res中，等待执行

request拦截器的 callback接收的是请求发起前的config
response拦截器的 callback接收的是网络请求的response结果

fetch添加拦截器

fetch.js

  1. const interceptors_req = []; // 请求拦截处理函数集合
  2. const interceptors_res = []; // 响应拦截方法
  4. const initParams = {
  5.   method: 'get',
  6.   headers: {
  7.     Accept: 'application/json',
  8.     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  9.   },
  10.   // body: {}, // Blob、BufferSource、FormData、URLSearchParams
  11.   // mode: '', // cors、 no-cors 或者 same-origin
  12.   // credentials: 'include', // 跨域传递cookie，omit、same-origin
  13.   // cache: '',
  14. }
  16. /**
  17.  * 在原生fetch基础之上增加拦截请求的功能
  18.  * 封装后，最终暴露在外面的接口应该于原生fetch的使用方法一致，同时增加拦截器功能
  19.  * 拦截器的API设计参考axios的拦截器，简化 axios
  20.  * @param options
  21.  * @param params
  22.  * @returns {Promise<unknown>}
  23.  * @constructor
  24.  */
  25. function Http(options) {
  26.   const { url, ...params } = options
  28.   // 请求拦截
  29.   interceptors_req.forEach(interceptor => {
  30.     options = interceptor(options)
  31.   })
  33.   return new Promise((resolve, reject) => {
  34.     return window.fetch(url, params)
  35.       .then(res => {
  36.         const { status } = res
  37.         interceptors_res.forEach(interceptor => {
  38.           res = interceptor(res)
  39.         })
  40.         // 将拦截器处理后的响应结果 resolve出去
  41.         if (status >= 200 && status < 300) {
  42.           return resolve(res)
  43.         }
  45.         // 权限不允许则跳转到登陆页面
  46.         if (status === 403 || status === 401) {
  47.           window.location = '/login'
  48.         }
  49.       })
  50.       .catch(err => reject(err))
  51.   });
  52. }
  54. // 拦截器
  55. Http.interceptors = {
  56.   request: {
  57.     use(callback) {
  58.       interceptors_req.push(callback)
  59.     },
  60.     eject: data => {
  61.       if(interceptors_req.indexOf(data) !== -1) {
  62.         interceptors_req.splice(interceptors_req.indexOf(data), 1)
  63.       }
  64.     }
  65.   },
  66.   response: {
  67.     use(callback) {
  68.       interceptors_res.push(callback)
  69.     },
  70.     eject: data => {
  71.       if(interceptors_res.indexOf(data) !== -1) {
  72.         interceptors_res.splice(interceptors_res.indexOf(data), 1)
  73.       }
  74.     }
  75.   }
  76. }
  78. export default Http
  80. // 使用，请求拦截器
  81. fetch.interceptors.request.use(config => {
  83.   return config;
  84. });
  86. // 响应拦截器
  87. fetch.interceptors.response.use(response => {
  89.   return response;
  90. });

组件中使用

  1. // 组件中使用
  2. import fetch from './http.js';
  4. // 请求拦截
  7. // 响应拦截
  10. // 清除拦截器