并发请求问题方案
背景
并发冲突问题， 是日常开发中一个比较常见的问题。
不同用户在较短时间间隔内变更数据，或者某一个用户进行的重复提交操作都可能导致并发冲突。
并发场景在开发和测试阶段难以排查全面，出现线上 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的场景
