前端之取消http请求_前端路由跳转后如何取消http请求? 进阶难度:考虑组件粒度

1 需求场景

• 场景 1 跳转新页面，取消原来页面还没返回的请求
• 场景 2 当前页面，取消耗时较长的请求
  备注：这里的请求为http请求

2 解决方案

2.1 XMLHttpRequest

原生的XMLHttpRequest,是支持取消http请求(abort)操作的: XMLHttpRequest.abort()

2.2 Fetch

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

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

// 正常的http调用
fetch('https://test.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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.3 axios

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');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.4 jquery

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

3 总结

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

参考文章

前端进阶（2）使用fetch/axios时， 如何取消http请求