因为再开发中遇见一个问题,前端发起一个请求之后,服务端很久没响应,然后前端又重新发起了
其实很简单

如果是fetch

let controller = null
controller && controller.abort() // 取消请求
controller = new AbortController()
const data = fetch('https://xxxxx',{
  signal: controller.signal // 重点
})

如果是axios

当然还有另外一个方式 CancelToken,但是我不会

import axios from 'axios';

let reqMap = new Map()

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    let oldControl = reqMap.get(config.url)
    oldControl && oldControl.abort() // 取消请求
    const controller = new AbortController()
    config.signal = controller.signal
    reqMap.set(config.url,config)
    return config;
  },
  error => {
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    reqMap.delete(response.config.url)
    return response;
  },
  error => {
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);


export default service













kkw凯凯王
42 声望2 粉丝

引用和评论

0 条评论