前端进阶使用fetch/axios时, 如何取消http请求

Posted Jack_N

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端进阶使用fetch/axios时, 如何取消http请求相关的知识,希望对你有一定的参考价值。

1. 需求

现在前端都是SPA,我们什么时候需要取消HTTP请求呢?

  1. 当我们从一个页面跳转到另外一个页面时,如果前一个页面的请求还没有返回,那么我们希望取消前一个页面的请求
  2. 某些操作耗时比较长(不能是保存等操作哦),如果用户不想等待呢,取消了操作,对应我们也需要取消HTTP请求

对于原生的XMLHttpRequest,是支持取消http请求(abort)操作的: XMLHttpRequest.abort()
那么,当我们使用ES6的fetch,或者使用axios库,如何实现呢?

2. Fetch 取消http请求

fetch与XMLHttpRequest(XHR)类似,是ES6之后浏览器(除IE之外)默认支持的http操作函数。可惜不是默认支持abort操作。但我们可以通过AbortController来实现, 直接上代码:

// 声明AbortController
const controller = new AbortController();

// 正常的http调用
fetch(\'https://jackniu81.github.io\', { signal: controller.signal })
    .then(r => r.json())
    .then(response => {
        console.log(response);
    })
    .catch(err => {
        if (err.name === \'AbortError\') {
            console.log(\'Fetch was aborted\')
        } else {
            console.log(\'Error\', err)
        }
    });

// 需要取消请求时,调用:
controller.abort()

3. axios取消http请求

axios 已经实现了abort操作,

var source = axios.CancelToken.source();

axios.get(\'https://jackniu81.github.io\', {
  cancelToken: source.token
}).catch(function(err) {
  if (axios.isCancel(err)) {
    // handle our cancel operation
    console.log(\'Request canceled\', err.message);
  } else {
    // handle real error here
  }
});

// 需要取消请求时,调用:
source.cancel(\'Abort Request\');

4. jquery 取消http请求

$.ajax内部已经实现了abort功能。直接调用.abort()即可。

5. 总结

  1. fetchAbortController集成:我们将 signal 属性作为可选参数(option)进行传递,之后 fetch 会监听它,因此它能够中止 fetch.
  2. AbortController 是可伸缩的,可以用于一次性终止多个请求
  3. 参考fetch的实现,我们自己的代码也完善一下,实现基于AbortController操作取消操作;
  4. axios 默认支持Abort操作;

以上是关于前端进阶使用fetch/axios时, 如何取消http请求的主要内容,如果未能解决你的问题,请参考以下文章

React如何使用内置的fetch模块

Vue体验(前后端交互)

React Native Fetch / Axios文件上传错误

vue中简单的数据请求 fetch axios

Vue 接口 promise + fetch + axios + async 和 await

Vue 接口 promise + fetch + axios + async 和 await