背景

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。了解原理可以更好的使用axios

拦截器使用方式

import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    console.log('request 1')
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)
axios.interceptors.request.use(
  function (config) {
    console.log('request 2')
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    console.log('response 1')
    return response
  },
  function (error) {
    // 对响应错误进行处理
    return Promise.reject(error)
  }
)
axios.interceptors.response.use(
  function (response) {
    console.log('response 2')
    return response
  },
  function (error) {
    // 对响应错误进行处理
    return Promise.reject(error)
  }
)

axios.get('/api')
  .then((data) => {
    // 处理返回的数据
    console.log('请求成功，数据为：', data);
  })
  .catch((error) => {
    // 处理错误
    console.error('请求失败，错误为：', error);
  });

注意请求拦截执行顺序!!!

axios.interceptors.response.use做了什么?

function InterceptorManager() {
  this.handlers = []
}

InterceptorManager.prototype.use = function use(fulfilled, rejected) {
  //拦截函数收集
  this.handlers.push({
    fulfilled: fulfilled,
    rejected: rejected
  })
  return this.handlers.length - 1
}

function Axios(instanceConfig) {
  this.defaults = instanceConfig
    
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager()
  }
}

取出拦截函数组成promise任务链