掌控ajax，取消请求随心所欲

2023-09-08 00:54:58

在现代web开发中，ajax请求早已成为必不可少的利器，它能实现页面局部刷新，提升用户体验。但有时，我们也需要在某些情况下取消这些请求，比如用户在点击提交按钮后改变了主意，或者页面即将跳转。因此，掌握ajax请求的取消方法至关重要。

本篇文章将深入浅出地讲解原生XHR、jQuery和Axios三种主流ajax框架中取消ajax请求的技巧。文中还提供了丰富的示例代码，帮助开发者轻松上手。

原生XMLHttpRequest

原生XMLHttpRequest提供了abort()方法来取消ajax请求。调用此方法会立即停止请求并触发onload和onerror事件。

const xhr = new XMLHttpRequest();

xhr.open("GET", "https://example.com/api/data");
xhr.onload = () => {
  console.log("请求成功");
};

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

jQuery

jQuery的$.ajax()方法提供了abort()方法来取消ajax请求。调用此方法会立即停止请求并触发complete和error事件。

$.ajax({
  url: "https://example.com/api/data",
  success: (data) => {
    console.log("请求成功");
  },
  error: (xhr) => {
    console.log("请求失败");
  }
}).abort();

Axios

Axios是一个基于Promise的ajax库。它提供了cancelToken来取消ajax请求。创建cancelToken后，将其作为请求配置的选项传递，即可在需要时调用cancelToken.cancel()方法取消请求。

const cancelToken = axios.CancelToken.source();

axios({
  url: "https://example.com/api/data",
  cancelToken: cancelToken.token,
}).then((response) => {
  console.log("请求成功");
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.log("请求已取消");
  } else {
    console.log("请求失败");
  }
});

// 取消请求
cancelToken.cancel();