【js】连续相同请求时,如何中断还未返回的请求

2023-12-13 07:38:03

需求

前端页面,用户连续翻页,或是连续筛选这样的连续请求,如果保证发起一次请求时,去中断掉上一次还未返回的请求?

代码

使用axios实现

import axios from 'axios';
import requistDuplicateBlacklist from './requistDuplicateBlacklist'

if(!window.cancelTokenSources){
  window.cancelTokenSources={}
}
// request拦截器
service.interceptors.request.use(
  (config) => {
    let key = config.url+'&'+config.method;
    if(requistDuplicateBlacklist.includes(key)){
      if(window.cancelTokenSources[key]){
        //如果之前有未完成请求,先中断
        window.cancelTokenSources[key].abort()
      }
      let controller = new AbortController();
      window.cancelTokenSources[key] = controller;
      config.signal = controller.signal 
    }
    return config;
  },
  (error) => {
    console.log(error);
    Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (res) => {
    let key = res.config.url+'&'+res.config.method;
    delete window.cancelTokenSources[key];
   }
  )

requistDuplicateBlacklist.js

export default [
    '/station/info/power&get',
    '/ps/power/station/findStationNumAndOwnerList&post',
    '/ps/power/station/findStationInfoByStationNum&get',
    '/ps/power/station/edit&post',
    '/ps/power/station/addMaintenanceAdvise&post',
    '/power/ts/list&get',
    '/station/inverter/month/list&get',
    '/station/inverter/year/list&get'
]

分析

1.设计了一个黑名单,用来拦截特定的接口;
2.设计了一个变量window.cancelTokenSources,用来记录已经发出还未返回的请求;
3.设置了一个请求拦截器,当请求接口属于黑名单,对该接口进行判断,如若有没有返回的接口,对4.其进行中断处理,否则将其记录在window.cancelTokenSources内;
设置了一个响应拦截器,当请求接口返回时,将该次请求从window.cancelTokenSources内删除

文章来源:https://blog.csdn.net/qq_41883423/article/details/134848638
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。