并发请求问题方案

背景

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

• 不同用户在较短时间间隔内变更数据，或者某一个用户进行的重复提交操作都可能导致并发冲突。

• 并发场景在开发和测试阶段难以排查全面，出现线上 bug 以后定位困难，因此做好并发控制是前后端开发过程中都需要重视的问题。

• 对于同一用户短时间内重复提交数据的问题，前端通常可以先做一层拦截

方案

• 方案一: 请求添加loading

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

• 方案二: axios 拦截器统一处理

  每次发送请求的时候进行并发控制，那如果能重新封装下发请求的公共函数，统一处理重复请求实现自动拦截，就可以大大简化我们的业务代码

axios实现方案

• 存储所有 pending 状态的请求
  let pendingRequests = new Map()
• axios拦截器包括请求拦截器和响应拦截器，可以在请求发送前或者响应后进行拦截处理;
  • 请求时拦截请求参数,判断是否已在请求中;
  • 响应时，删除请求中的成功请求;
• axios cancel token 取消重复请求
• 异常情况处理pendingRequests

代码如下

import axios from 'axios';

// 存储pending请求
let pendingRequests = new Map();
// 根据请求参数生成唯一key
let generateKey = function(config) {
    return `${config.url}/${JSON.stringify(config.params)}/${JSON.stringify(config.data)}&request_type=${config.method}`;
}

axios.interceptors.request.use(function(config) {
    // 请求拦截
    let requestKey = generateKey(config);
    if(pendingRequests.has(requestKey)) {
        config.cancelToken = new axios.CancelToken(cancel => {
            cancel(`重复请求被拦截: ${requestKey}`)
        }) 
    } else {
        pendingRequests.set(requestKey, config);
        config.requestKey = requestKey;
    }
    return config;
}, function(err) {
    console.log('request error')
    pendingRequests.clear();
    return Promise.reject(err)
})

axios.interceptors.response.use(function(res) {
    // 响应拦截
    let requestKey = res.config.requestKey;
    pendingRequests.delete(requestKey);
    return Promise.resolve(res);
}, function(err) {
    console.log('response error')
    if(axios.isCancel(err)) {
        return Promise.reject(err);
    }
    let requestKey = err.config.requestKey;
    pendingRequests.delete(requestKey);
    return Promise.reject(err)
})

export default axios;

注意

• 页面切换时也需要清空之前缓存的 pendingRequests 对象，可以利用 Vue Router 的 beforeEach 钩子处理

问题？

• 请求拦截器rejected的场景

建议大家看下，这个场景大家遇到的应该比较多；感谢