使用React hooks结合fetch中止请求的方法探讨

https://zhuanlan.zhihu.com/p/119316988

 

二、关于 fetch 请求 abort 的解决方法

由于本次项目开发是多人合作的，项目一直使用的是 fetch 模块，对于一直习惯于使用 axios 的我来说只能钻进文档里求解，结果发现 fetch 的浏览器兼容性也不是很好，并且当前还不支持 abort 方法，目前来说解决该问题的方法有两种：

• 使用 AbortController 构造函数中止请求
• Promise.race 模拟中止请求

2.1 使用 AbortController 构造函数中止请求(实验中)

该功能尚在实验阶段，未来语法可能还会有改动，该构造函数创建一个新的AbortController对象。 运用AbortSignal 对象完成与 DOM 请求的通信，使用起来比较简单：

var controller = new AbortController(); //  创建一个实例
var signal = controller.signal;

function fetchData() {
      fetch(url,{
            signal
      }).then(function(res) { // 在fetch的第二参数中引入signal
            console.log(res)
      }).catch(function(e) {
            console.log(e)
      })
}

controller.abort(); // 调用controller.abort()即可中止此次请求。

2.2 Promise.race 模拟中止请求(请求赛跑，谁先完成就返回谁)

该方法其实无法中止已发送出去的请求，只是通过 Promise.race 方法返回另一个 Promise 对象来取代我们不想要的请求结果。用 MDN 的话说就是使用Promise.race(iterable)返回一个 promise，一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。

举个栗子：

const promise1 = new Promise(function(resolve, reject) {  // Promise1想象成我们需要中止的请求，
    setTimeout(resolve, 5000, 'one');
});

const promise2 = new Promise(function(resolve, reject) {  // Promise2想象成我们用来替换请求结果的Promise
    setTimeout(resolve, 10, 'two');
});

Promise.race([promise1, promise2]).then(function(value) {
  console.log(value);  // 最终两个promise都将执行完成，但是结果返回的却是最快的那个Promise,因此答案是'two'
}); 

基于此，我们便可以使用fetch和Promise.race([promise1, promise2])来进行模拟：

export function fetchWithAbort(fetchPromise: any) {  // 封装一个带有abort功能的函数，将我们的fetch请求传入。
    let abort = null
    const abortPromise = new Promise((resolve, reject) => {  // 创建一个abortPromise，调用abort()会立刻reject('abort')
        abort = () => {
            reject('abort');
        }
    })
    let promiseWithAbort: any = Promise.race([fetchPromise, abortPromise])
    promiseWithAbort.abort = abort // 将abort方法传递给promiseWithAbort的abort属性
    return promiseWithAbort 
}

使用方法：

// 发送请求
const newFetch = fetchWithAbort(request(url)); 
newFetch.then(res=>{  
   // 这里res将会返回正常的请求数据
}).catch(e=>{  
   // 捕获异常以及abort做进一步处理...
});

// 中止请求
newFetch.abort(); // 调用abort()方法将会立刻reject('abort')；