当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 以antd项目内实践为例，中断指定fetch请求的方法

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

2020年07月14日  | 移动技术网IT编程  | 我要评论

因为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');
     }
}

使用效果：
在这里插入图片描述

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网