Axios 取消请求

在前端开发中，尤其是在处理异步请求时，取消请求是一个非常重要的功能。它可以帮助我们优化用户体验、避免不必要的数据加载以及提高应用性能。Axios 提供了取消请求的能力，通过 CancelToken 或者 AbortController 来实现。

什么是取消请求？

取消请求是指在发起请求后，可以在请求完成之前取消该请求。这在一些场景下特别有用，比如用户快速切换页面或进行其他操作时，我们可能希望取消正在进行的请求，避免不必要的网络开销和资源浪费。

如何使用 CancelToken 取消请求

创建 CancelToken

首先，我们需要创建一个 CancelToken 实例。可以通过以下方式来创建：

// www.javascriptcn.com code example
const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
    cancelToken: new CancelToken(function executor(c) {
        // An executor function receives a cancel function as a parameter
        cancel = c;
    })
}).catch(function (thrown) {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
    } else {
        // 处理错误
    }
});

在这个例子中，我们创建了一个 CancelToken 实例，并将取消函数赋值给变量 cancel。如果需要取消请求，只需调用 cancel() 函数即可。

取消请求

一旦我们有了取消函数，就可以在任何地方调用它来取消请求。例如，在用户点击某个按钮时：

document.getElementById('cancel-button').addEventListener('click', () => {
    cancel('用户请求已取消');
});

注意事项

• CancelToken 只能在请求发送前被创建。
• CancelToken 一旦被使用后就不能再被重用。
• 如果请求已经完成，那么取消请求不会产生任何效果。

使用 AbortController 取消请求

除了 CancelToken，Axios 还支持使用浏览器内置的 AbortController 来取消请求。这种方式更接近于原生的异步编程风格。

创建 AbortController

// www.javascriptcn.com code example
const controller = new AbortController();
const signal = controller.signal;

axios.get('/user/12345', {
    signal: signal
}).then(function(response) {
    // 处理响应
}).catch(function(error) {
    if (error.name === 'AbortError') {
        console.log('请求已取消');
    } else {
        // 处理其他错误
    }
});

// 取消请求
controller.abort();

在这个例子中，我们创建了一个 AbortController 实例，并将其信号传递给 axios.get 方法。当需要取消请求时，调用 controller.abort() 即可。

特点

• AbortController 是一种基于 Promise 的取消机制，更加现代化。
• 它可以用于任何基于 Promise 的异步操作，而不仅仅是 Axios 请求。
• 与 CancelToken 相比，AbortController 更符合现代 JavaScript 编程风格。

总结

取消请求是提升前端应用性能和用户体验的重要手段之一。通过使用 CancelToken 或 AbortController，我们可以有效地管理异步请求的生命周期。在实际开发中，应根据具体需求选择合适的方法来实现请求的取消功能。