如何优雅的管理 HTTP 请求和响应拦截器？

本文思路来自实际项目的重构总结，欢迎纠正和交流。如果对你有帮助，还请点赞👍收藏支持一下啦。

最近重构一个老项目，发现其中处理请求的拦截器写得相当乱，于是我将整个项目的请求处理层重构了，目前已经在项目中正常运行。

本文会和大家分享我的重构思路和后续优化的思考，为方便与大家分享，我用 Vue3 实现一个简单 demo，思路是一致的，有兴趣的朋友可以在我 Github 查看，本文会以这个 Vue 实现的 demo 为例介绍。

本文我会主要和大家分享以下几点：

1. 问题分析和方案设计；
2. 重构后效果；
3. 开发过程；
4. 后期优化点；

如果你还不清楚什么是 HTTP 请求和响应拦截器，那么可以先看看《77.9K Star 的 Axios 项目有哪些值得借鉴的地方》 。

一、需求思考和方案设计

1. 问题分析

目前旧项目经过多位同事参与开发，拦截器存在以下问题：

• 代码比较混乱，可读性差；
• 每个拦截器职责混乱，存在相互依赖；
• 逻辑上存在问题；
• 团队内部不同项目无法复用；

2. 方案设计

分析上面问题后，我初步的方案如下：
参考插件化架构设计，独立每个拦截器，将每个拦截器抽离成单独文件维护，做到职责单一，然后通过拦截器调度器进行调度和注册。

其拦截器调度过程如下图：

二、重构后效果

代码其实比较简单，这里先看下最后实现效果：

1. 目录分层更加清晰

重构后请求处理层的目录分层更加清晰，大致如下：

2. 拦截器开发更加方便

在后续业务拓展新的拦截器，仅需 3 个步骤既可以完成拦截器的开发和使用，拦截器调度器会自动调用所有拦截器：

3. 每个拦截器职责更加单一，可插拔

将每个拦截器抽成一个文件去实现，让每个拦截器职责分离且单一，当不需要使用某个拦截器时，随时可以替换，灵活插拔。

三、开发过程

这里以我单独抽出来的这个 demo 项目为例来介绍。

1. 初始化目录结构

按照前面设计的方案，首先需要在项目中创建一下目录结构：

- request
	- index.js      // 拦截器调度器
  - interceptors  
    - request     // 用来存放每个请求拦截器
    	- index.js  // 管理所有请求拦截器，并做排序
    - response    // 用来存放每个响应拦截器
    	- index.js  // 管理所有响应拦截器，并做排序

2. 定义拦截器调度器

因为项目采用 axios 请求库，所以我们需要先知道 axios 拦截器的使用方法，这里简单看下 axios 文档上如何使用拦截器的：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
   
    // 业务 逻辑
    return config;
  }, function (error) {
   
    // 业务 逻辑
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
   
    // 业务 逻辑
    return response;
  }, function (error) {
   
    // 业务逻辑
    return Promise.reject(error);
  })