【前端性能优化】如何取消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 operation
    console.log('Request canceled', err.message);
  } else {
    // handle real error here
  }
});

// 需要取消请求时，调用：
source.cancel('Operation canceled by the user.');

哪些情况需要取消HTTP请求

1. 用户导航变化： 当用户在页面上进行导航或关闭页面时，取消不再需要的请求可以提高性能和减少不必要的网络开销。

2. 异步操作： 在执行异步操作时，比如搜索建议或自动完成，如果用户继续输入新的内容，你可能会希望取消之前的请求，以确保仅处理最新的输入。

3. 长时间请求： 对于较长时间的请求，例如大文件上传或下载，用户可能想要取消操作，避免等待太久。

取消http请求能带来哪些性能提升

• 性能提升： 取消不必要的请求可以减轻服务器负担，提高应用性能。

• 节省带宽： 对于大文件下载或上传，取消请求可以避免不必要的数据传输，节省用户的带宽。

• 更好的用户体验： 在用户取消操作时，立即取消相关的请求可以提供更即时的反馈，增强用户体验。