欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

以antd项目内实践为例,中断指定fetch请求的方法

程序员文章站 2022-07-02 15:28:38
因为fetch请求不像ajax有自带的abort方法,所以是使用 window.AbortController来实现中断请求创建Signal和停止Signal的方法写入一个公共管理文件并导出common.js// 创建一个signalexport function newSignal(key) { if ("AbortController" in window) { window[key+'Controller'] = new AbortController(); } retur...

因为fetch请求不像ajax有自带的abort方法,所以是使用 window.AbortController来实现中断请求

创建Signal和停止Signal的方法写入一个公共管理文件并导出
common.js

const signalCache = {};
// 创建一个signal
export function newSignal(key) {
  // 用于中断请求,避免数据加载时间过长时,同一接口先请求却后返回数据带来的数据错位问题
  if ("AbortController" in window) {
    signalCache[key+'Controller'] = new AbortController();
  }
  return signalCache[key+'Controller'];
}

// 执行abort方法,停止指定key的AbortController
export function stopSignal(key) {
  if ("AbortController" in window ) {
    signalCache[key+'Controller'] && signalCache[key+'Controller'].abort();
    delete signalCache[key+'Controller'];
  }
}

使用:

创建一个需要中断的接口,并为该接口指定一个唯一的key,此处key为myList,
并以参数的形式传入

 import { newSignal } from './common.js';
 dispatch({
   type: 'exampleModel/fetchMyList',
    payload: {
      ...params,
      signal: newSignal('myList').signal, 
    },
  });
...

在你需要的任意时候 发起指定key的中断请求

import {  stopSignal } from './common.js';
 stopSignal('myList');

修改对应的请求文件
向option添加signal,并添加AbortError异常捕获
request.js

... 

export default function request(url, options) {
...

  let newOptions = { ...options };
  // 配置signal
  if(newOptions.body && newOptions.body.signal) {
    const signal = newOptions.body.signal;
    delete newOptions.body.signal;
    newOptions = { ...newOptions, signal };
  }
  
  return fetch(url, newOptions)
  .then((res) => {})
  // 如果请求完成了,调用abort()不会发生错误
  // 如果请求没有完成,那么Fetch就会抛出一个DOMException异常,异常的name属性值为"AbortError",因此要用catch捕获异常
  .catch((err) => { 
     if (err.name === 'AbortError') {
          console.log('Fetch aborted');
     } else {
         console.log('Another error');
     }
}

使用效果:
以antd项目内实践为例,中断指定fetch请求的方法

本文地址:https://blog.csdn.net/weixin_38122772/article/details/107317993