防重复请求：JS封装Axios拦截器的实现

资源摘要信息:"js代码-封装axois拦截重复请求" 在前端开发中，使用Ajax技术与服务器进行异步通信是一种常见的做法。Axios是一个基于Promise的HTTP客户端，用于浏览器和node.js中，它提供了一种简洁的方式来处理HTTP请求和响应。在实际开发过程中，可能会遇到同一个请求被多次触发的情况，特别是在用户快速点击多次导致重复发送请求，或者在一些列表操作时，对同一条数据进行重复的创建、更新操作。为了避免这些问题，常常需要对重复的Ajax请求进行拦截。 为了解决重复请求的问题，可以使用Axios的拦截器功能来实现。拦截器允许我们在请求发送前或响应返回前后添加一些处理逻辑。具体来说，可以在请求发送前检查是否已经有相同的请求正在发送，如果有，则取消新的请求；或者在接收到响应后，根据需要处理返回的数据。 以下是一个如何使用Axios拦截重复请求的示例代码： ```javascript // main.js import axios from 'axios'; // 创建一个标志，用于标识是否已经有请求在发送 const pendingRequest = new Map(); // 请求拦截器 axios.interceptors.request.use(function (config) { // 为请求配置一个唯一的标识符 const requestKey = config.url + '&' + config.method + '&' + JSON.stringify(config.params) + '&' + JSON.stringify(config.data); if (pendingRequest.has(requestKey)) { // 如果请求已经在发送中，则取消这次请求 config.cancelToken = new axios.CancelToken(function executor(cancel) { pendingRequest.get(requestKey).cancel = cancel; }); } else { // 如果请求不在发送中，存储这个请求，以便之后的请求可以查询到 pendingRequest.set(requestKey, config); } return config; }, function (error) { // Do something with request error return Promise.reject(error); }); // 响应拦截器 axios.interceptors.response.use(function (response) { // 对应请求完成，从pendingRequest中移除 const requestKey = response.config.url + '&' + response.config.method + '&' + JSON.stringify(response.config.params) + '&' + JSON.stringify(response.config.data); if (pendingRequest.has(requestKey)) { pendingRequest.delete(requestKey); } return response; }, function (error) { // 对于响应错误处理 return Promise.reject(error); }); // 使用封装后的axios发送请求 axios.get('your-api-url', { // 你想要发送的配置项 }).then(function (response) { // 请求成功处理 }).catch(function (error) { // 请求失败处理 }); ``` 上述代码中，首先使用`Map`对象存储正在发送的请求，通过URL、请求方法、请求参数以及请求数据组合成唯一的标识符，以此来区分不同的请求。在请求拦截器中，如果发现相同的请求正在发送，则通过`CancelToken`取消重复的请求。在响应拦截器中，一旦请求成功响应，就从`Map`中移除对应的标识符，确保资源的释放。 通过这种方式，可以有效地解决前端重复请求的问题，提高应用性能和用户体验。需要注意的是，在实际应用中，还需要考虑请求的并发处理，例如在快速连续多次点击时，确保正确处理每个请求。此外，还需要处理取消请求后的状态管理，确保界面上的显示与服务器的数据状态保持一致。