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

文章目录需要取消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