文章目录
- 需要取消http请求的3种经典场景
- 原生XMLHttpRequest取消http请求
- fetch取消http请求
- axios取消http请求
- 哪些情况需要取消HTTP请求
- 取消http请求能带来哪些性能提升
✍创作者：全栈弄潮儿
🏡 个人主页： 全栈弄潮儿的个人主页
🏙️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区
📙 专栏地址，欢迎订阅：前端架构师之路
需要取消http请求的3种经典场景
场景一：有一个实时搜索功能，每当用户输入内容改变的时候，就会去调用一个接口，返回搜索结果数据，如果第二次响应的速度可能会比第一次快，页面的内容先变成第二次的内容，再变成第一次的内容，这就造成了搜索结果不对的情况。除了做防抖节流，还需要取消上一次接口请求。
场景二：当我们从一个页面跳转到另外一个页面时，如果前一个页面的请求还没有返回，那么我们希望取消前一个页面的接口请求。
场景三：某些操作耗时比较长，如果用户不想等待，取消了操作，也需要取消接口请求。
原生XMLHttpRequest取消http请求
letxhr=newXMLHTTPRequest(),constmethod='GET',consturl="https:xxx.com/users"xhr.open(method,url,true);xhr.send();// 需要取消请求的地方xhr.abort();//取消请求fetch取消http请求
fetch与XMLHttpRequest(XHR)类似，是ES6之后浏览器（除IE之外）默认支持的http操作函数。可惜不是默认支持abort操作。但我们可以通过AbortController来实现：
// 声明AbortControllerletcontroller=new
