使用 axios 拦截器解决「 前端并发冲突 」 问题

背景

并发冲突问题， 是平常开发中一个比较常见的问题。

不一样用户在较短期间隔内变动数据，或者某一个用户进行的重复提交操做均可能致使并发冲突。

并发场景在开发和测试阶段难以排查全面，出现线上 bug 之后定位困难，所以作好并发控制是先后端开发过程当中都须要重视的问题。

对于同一用户短期内重复提交数据的问题，前端一般能够先作一层拦截。

本文将讨论前端如何利用 axios 的拦截器过滤重复请求，解决并发冲突。

通常的处理方式 — 每次发请求添加 loading

在尝试 axios 拦截器以前，先看看咱们以前业务是怎么处理并发冲突问题的：

每次用户操做页面上的控件（输入框、按钮等），向后端发送请求的时候，都给页面对应的控件添加 loading 效果，提示正在进行数据加载，同时也阻止 loading 效果结束前用户继续操做控件。

这是最直接有效的方式，若是大家前端团队成员足够细心耐心，拥有良好的编码习惯，这样就能够解决大部分用户不当心重复提交带来的并发问题了。

更优的解决方案： axios 拦截器统一处理

项目中须要前端限制并发的场景这么多，咱们固然要思考更优更省事的方案。

既然是在每次发送请求的时候进行并发控制，那若是能从新封装下发请求的公共函数，统一处理重复请求实现自动拦截，就能够大大简化咱们的业务代码。

项目使用的 axios 库来发送 http 请求，axios 官方为咱们提供了丰富的 API，咱们来看看拦截请求须要用到的两个核心 API:

1. interceptors

拦截器包括请求拦截器和响应拦截器，能够在请求发送前或者响应后进行拦截处理，用法以下：

// 添加请求拦截器
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);
  });

2. cancel token:

调用 cancel token API 能够取消请求。官网提供了两种方式来构建 cancel token，咱们采用这种方式：经过传递一个 executor 函数到 CancelToken 的构造函数来建立 cancel token，方便在上面的请求拦截器中检测到重复请求能够当即执行:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数做为参数
    cancel = c;
  })
});

// cancel the request
cancel();

本文提供的思路就是利用 axios interceptors API 拦截请求，检测是否有多个相同的请求同时处于 pending 状态，若是有就调用 cancel token API 取消重复的请求。

假如用户重复点击按钮，前后提交了 A 和 B 这两个彻底相同（考虑请求路径、方法、参数）的请求，咱们能够从如下几种拦截方案中选择其一：

• 取消 A 请求，只发出 B 请求
• 取消 B 请求，只发出 A 请求
• 取消 B 请求，只发出 A 请求，把收到的 A 请求的返回结果也做为 B 请求的返回结果

第三种方案须要作监听处理增长了复杂性，结合咱们实际的业务需求，最后采用了第二种方案来实现，即：

只发第一个请求。在 A 请求还处于 pending 状态时，后发的全部与 A 重复的请求都取消，实际只发出 A 请求，直到 A 请求结束（成功/失败）才中止对这个请求的拦截。

具体实现

1. 存储全部 pending 状态的请求

首先咱们要将项目中全部的 pending 状态的请求存储在一个变量中，叫它 pendingRequests，

能够经过把 axios 封装为一个单例模式的类，或者定义全局变量，来保证 pendingRequests 变量在每次发送请求前均可以访问，并检查是否为重复的请求。

let pendingRequests = new Map()

把每一个请求的方法、url 和参数组合成一个字符串，做为标识该请求的惟一 key，同时也是 pendingRequests 对象的 key:

const requestKey = `${config.url}/${JSON.stringify(config.params)}/${JSON.stringify(config.data)}&request_type=${config.method}`;

帮助理解的小 tips:

• 定义 pendingRequests 为 map 对象的目的是为了方便咱们查询它是否包含某个 key，以及添加和删除 key。添加 key 时，对应的 value 能够设置用户自定义的一些功能参数，后面扩展功能的时候会用到。
• config 是 axios 拦截器中的参数，包含当前请求的信息

1. 在请求发出前检查当前请求是否重复

   在请求拦截器中，生成上面的 requestKey，检查 pendingRequests 对象中是否包含当前请求的 requestKey

   • 有：说明是重复的请求，cancel 掉当前请求
   • 没有：把 requestKey 添加到 pendingRequests 对象中

由于后面的响应拦截器中还要用到当前请求的 requestKey，为了不踩坑，最好不要再次生成，在这一步就把 requestKey 存回 axios 拦截器的 config 参数中，后面能够直接在响应拦截器中经过 response.config.requestKey 取到。

代码示例：

// 请求拦截器
axios.interceptors.request.use(
  (config) => {
    if (pendingRequests.has(requestKey)) {
      config.cancelToken = new axios.CancelToken((cancel) => {
        // cancel 函数的参数会做为 promise 的 error 被捕获
        cancel(`重复的请求被主动拦截: ${requestKey}`);
      });
    } else {
      pendingRequests.set(requestKey, config);
      config.requestKey = requestKey;
    }
    return config;
  },
  (error) => {
    // 这里出现错误多是网络波动形成的，清空 pendingRequests 对象
    pendingRequests.clear();
    return Promise.reject(error);
  }
);

1. 在请求返回后维护 pendingRequests 对象

若是请求顺利走到了响应拦截器这一步，说明这个请求已经结束了 pending 状态，那咱们要把它从 pendingRequests 中除名：

axios.interceptors.response.use((response) => {
  const requestKey = response.config.requestKey;
  pendingRequests.delete(requestKey);
  return Promise.resolve(response);
}, (error) => {
  if (axios.isCancel(error)) {
    console.warn(error);
    return Promise.reject(error);
  }
  pendingRequests.clear();
  return Promise.reject(error);
})

1. 须要清空 pendingRequests 对象的场景

遇到网络波动或者超时等状况形成请求错误时，须要清空原来存储的全部 pending 状态的请求记录，在上面演示的代码已经做了注释说明。

此外，页面切换时也须要清空以前缓存的 pendingRequests 对象，能够利用 Vue Router 的 beforeEach 钩子：

router.beforeEach((to, from, next) => {
  request.clearRequestList();
  next();
});

功能扩展

1. 统一处理接口报错提示

与后端约定好接口返回数据的格式，对接口报错的状况，能够统一在响应拦截器中添加 toast 给用户提示，

对于特殊的不须要报错的接口，能够设置一个参数存入 axios 拦截器的 config 参数中，过滤掉报错提示:

// 接口返回 retcode 不为 0 时须要报错，请求设置了 noError 为 true 则这个接口不报错 
if (
  response.data.retcode &&
  !response.config.noError
) {
  if (response.data.message) {
    Vue.prototype.$message({
      showClose: true,
      message: response.data.message,
      type: 'error',
    });
  }
  return Promise.reject(response.data);
}

1. 发送请求时给控件添加 loading 效果

上面利用 axios interceptors 过滤重复请求时，能够在控制台抛出信息给开发者提示，在这个基础上若是能给页面上操做的控件添加 loading 效果就会对用户更友好。

常见的 ui 组件库都有提供 loading 服务，能够指定页面上须要添加 loading 效果的控件。下面是以 element UI 为例的示例代码：

// 给 loadingTarget 对应的控件添加 loading 效果，储存 loadingService 实例
addLoading(config) {
  if (!document.querySelector(config.loadingTarget)) return;
  config.loadingService = Loading.service({
    target: config.loadingTarget,
  });
}

// 调用 loadingService 实例的 close 方法关闭对应元素的 loading 效果
closeLoading(config) {
  config.loadingService && config.loadingService.close();
}

与上面过滤报错方式相似，发请求的时候将元素的 class name 或 id 存入 axios 拦截器的 config 参数中，

在请求拦截器中调用 addLoading 方法, 响应拦截器中调用 closeLoading 方法，就能够实如今请求 pending 过程当中指定控件（如 button） loading，请求结束后控件自动取消 loading 效果。

1. 支持多个拦截器组合使用

简单看下 axios interceptors 部分实现源码能够理解，它支持定义多个 interceptors，因此只要咱们定义的 interceptors 符合 Promise.then 链式调用的规范，还能够添加更多功能:

this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
  chain.unshift(interceptor.fulfilled, interceptor.rejected);
});

this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
  chain.push(interceptor.fulfilled, interceptor.rejected);
});

while (chain.length) {
  promise = promise.then(chain.shift(), chain.shift());
}

总结

并发问题很常见，处理起来又相对繁琐，前端解决并发冲突时，能够利用 axios 拦截器统一处理重复请求，简化业务代码。

同时 axios 拦截器支持更多应用，本文提供了部分经常使用扩展功能的实现，感兴趣的同窗能够继续挖掘补充拦截器的其余用法。

今天的内容就这么多，但愿对你有帮助。

若是以为内容有帮助， 能够关注下个人公众号，掌握最新动态，一块儿学习！