【前端性能优化】如何取消http请求-编程知识

【前端性能优化】如何取消http请求

文章目录

- 需要取消http请求的3种经典场景
- 原生XMLHttpRequest取消http请求
- fetch取消http请求
- axios取消http请求
- 哪些情况需要取消HTTP请求
- 取消http请求能带来哪些性能提升

✍创作者：全栈弄潮儿
🏡 个人主页：全栈弄潮儿的个人主页
🏙️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区
📙 专栏地址，欢迎订阅：前端架构师之路

需要取消http请求的3种经典场景

场景一：有一个实时搜索功能，每当用户输入内容改变的时候，就会去调用一个接口，返回搜索结果数据，如果第二次响应的速度可能会比第一次快，页面的内容先变成第二次的内容，再变成第一次的内容，这就造成了搜索结果不对的情况。除了做防抖节流，还需要取消上一次接口请求。
场景二：当我们从一个页面跳转到另外一个页面时，如果前一个页面的请求还没有返回，那么我们希望取消前一个页面的接口请求。
场景三：某些操作耗时比较长，如果用户不想等待，取消了操作，也需要取消接口请求。

原生XMLHttpRequest取消http请求

let xhr = new XMLHTTPRequest(),
const method = 'GET',
const url = "https:xxx.com/users"
xhr.open(method,url,true);
xhr.send();// 需要取消请求的地方
xhr.abort();  //取消请求

fetch取消http请求

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

// 声明AbortController
let controller = new AbortController();// 正常的http调用
fetch('https:xxx.com/users', { signal: controller.signal }).then(res => res.json()).then(response => {console.log(response);}).catch(err => {if (err.name === 'AbortError') {console.log('Fetch was aborted')} else {console.log('error', err)}})；// 需要取消请求时，调用：
controller.abort()

实时搜索用户，取消上一次请求：

let controller;const searchUsers = () => {controller && controller.abort();controller = new AbortController();const signal =  Controller.signal;// 正常的http调用fetch('https:xxx.com/users', { signal: controller.signal }).then(res => res.json()).then(response => {console.log(response);}).catch(err => {if (err.name === 'AbortError') {console.log('Fetch was aborted')} else {console.log('error', err)}});}
}

axios取消http请求

const source = axios.CancelToken.source();axios.get('https:xxx.com/users', {cancelToken: source.token
}).catch(function(err) {if (axios.isCancel(err)) {// handle our cancel operationconsole.log('Request canceled', err.message);} else {// handle real error here}
});// 需要取消请求时，调用：
source.cancel('Operation canceled by the user.');