JavaScript——中断请求的几种方案_js怎么中断timeout-CSDN博客

本文链接：https://blog.csdn.net/weixin_41309331/article/details/120180566

本文探讨了在JavaScript中如何模拟中断网络请求，通过Promise和RxJS等方式处理请求的中断。介绍了中断调用链的概念，以及如何设置超时并中断请求。还封装了一个灵活的方法，允许用户手动控制请求的中断，确保即使请求被中断，也不会继续关心其结果。最后，对比了axios的CancelToken使用方法，展示了与包装方法的相似思想。

摘要由CSDN通过智能技术生成

1 `Promise`

Promise有一个缺点是一旦创建无法取消,所以本质上Promise是无法被终止的.

但是我们可以通过中断调用链或中断Promise来模拟请求的中断.

中断调用链

中断调用链就是在某一个then/catch执行之后,后续的链式调用(包括then,catch,finally)不再继续执行.

方法是在then/catch返回一个新的Promise实例,并保持pending状态:

new Promise((resolve, reject) => {
   
    setTimeout(() => {
   
        resolve('result');
    });
}).then(res => {
   
    // 达到某种条件,return一个pending状态的Promise实例,以中断调用链
    if (res === 'result') {
   
        return new Promise(() => {
   });
    }
    console.log(res); // 不打印
}).then(() => {
   
    console.log('then不执行'); // 不打印
}).catch(() => {
   
    console.log('catch不执行'); // 不打印
}).finally(() => {
   
    console.log('finally不执行'); // 不打印
});

中断`Promise`

中断Promise不等同于中止Promise,因为Promise是无法被终止的.

这里的中断指的是,在合适的时机,把pending状态的promise给reject掉.例如一个常见的应用场景就是给网络请求设置超时时间,一旦超时就中断.

老规矩,用setTimeout来模拟网络请求.阀值设置为Math.random() * 3000表示随机3秒之内返回结果.

const request = new Promise((resolve, reject) => {
   
  setTimeout(() => {
   
    resolve('收到服务端数据')
  }, Math.random()

JavaScript——中断请求的几种方案

1 Promise

中断调用链

中断Promise

1 `Promise`

中断`Promise`