并发请求问题方案

时间:2021-7-2 作者:qvyue

并发请求问题方案

背景

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

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

  • 并发场景在开发和测试阶段难以排查全面,出现线上 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的场景

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。