✍创作者:全栈弄潮儿
🏡 个人主页: 全栈弄潮儿的个人主页
🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区
📙 专栏地址,欢迎订阅:前端架构师之路
需要取消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 operation
console.log('Request canceled', err.message);
} else {
// handle real error here
}
});
// 需要取消请求时,调用:
source.cancel('Operation canceled by the user.');
哪些情况需要取消HTTP请求
-
用户导航变化: 当用户在页面上进行导航或关闭页面时,取消不再需要的请求可以提高性能和减少不必要的网络开销。
-
异步操作: 在执行异步操作时,比如搜索建议或自动完成,如果用户继续输入新的内容,你可能会希望取消之前的请求,以确保仅处理最新的输入。
-
长时间请求: 对于较长时间的请求,例如大文件上传或下载,用户可能想要取消操作,避免等待太久。
取消http请求能带来哪些性能提升
-
性能提升: 取消不必要的请求可以减轻服务器负担,提高应用性能。
-
节省带宽: 对于大文件下载或上传,取消请求可以避免不必要的数据传输,节省用户的带宽。文章来源:https://www.toymoban.com/news/detail-801607.html
-
更好的用户体验: 在用户取消操作时,立即取消相关的请求可以提供更即时的反馈,增强用户体验。文章来源地址https://www.toymoban.com/news/detail-801607.html
到了这里,关于【前端性能优化】如何取消http请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!