并发请求问题解决方案

并发请求问题方案

背景

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

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

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

并发请求问题解决方案_第1张图片

你可能感兴趣的:(python,vue,javascript,js,java)