返回

Ajax请求取消大法：从入门到精通

前端

掌控 Ajax 请求：增强取消能力，打造交互式且响应式的网页

随着我们深入探讨 Web 开发的魅力，我们经常遇到需要与服务器通信的情况。从获取数据到提交表单，Ajax 技术在这方面发挥着至关重要的作用。但是，在某些情况下，我们可能希望取消正在进行的 Ajax 请求，例如当用户改变主意或请求已过时时。

渐进式取消能力

为了赋予 Ajax 请求取消的能力，我们可以利用 Promise 的力量。Promise 是一种 JavaScript 对象，它允许我们在异步操作完成后处理其结果。我们可以将 Ajax 请求包装在一个 Promise 中，如下所示：

function ajax(url, data) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url,
      data,
      success: (data, textStatus, jqXHR) => {
        resolve(data);
      },
      error: (jqXHR, textStatus, errorThrown) => {
        reject(errorThrown);
      }
    });
  });
}

现在，我们已经可以使用 ajax 函数向服务器发送异步请求，并且可以处理请求的结果或错误。但是，如果我们希望在请求完成之前取消它呢？

为了实现这一点，我们可以使用 AbortController 对象。AbortController 允许我们创建信号对象，当触发取消时，该信号对象会指示 Ajax 请求中断。下面是如何增强我们的 ajax 函数以支持取消：

function ajaxWithCancel(url, data) {
  const controller = new AbortController();
  const signal = controller.signal;

  return new Promise((resolve, reject) => {
    $.ajax({
      url,
      data,
      signal,
      success: (data, textStatus, jqXHR) => {
        resolve(data);
      },
      error: (jqXHR, textStatus, errorThrown) => {
        reject(errorThrown);
      }
    });
  });
}

现在，当我们使用 ajaxWithCancel 函数时，我们还可以传递一个 AbortController 对象作为参数。如果我们需要取消请求，我们可以简单地调用 controller.abort() 方法。

扩展对取消控制器的支持

我们已经将取消能力集成到我们的 ajaxWithCancel 函数中，但我们还可以进一步扩展它，以便可以在外部控制取消。我们可以创建另一个函数，该函数将 ajaxWithCancel 函数与 AbortController 耦合在一起：

function ajaxWithCancelAndController(url, data, controller) {
  const signal = controller.signal;

  return new Promise((resolve, reject) => {
    $.ajax({
      url,
      data,
      signal,
      success: (data, textStatus, jqXHR) => {
        resolve(data);
      },
      error: (jqXHR, textStatus, errorThrown) => {
        reject(errorThrown);
      }
    });
  });
}

现在，我们可以使用 ajaxWithCancelAndController 函数，并在需要时传递一个 AbortController 对象来控制取消。这为我们在构建高度交互式和响应式的 Web 应用程序时提供了更大的灵活性。

总结

通过实现 Ajax 请求的 Promise 包装、逐步增强取消能力以及扩展对取消控制器的支持，我们已经赋予 Ajax 请求了强大的取消能力。这使我们能够在不刷新整个页面的情况下与服务器进行交互，并根据需要控制取消请求。通过拥抱这些技术，我们可以为用户创造更流畅、更响应式的 Web 体验。

常见问题解答

  1. 为什么要取消 Ajax 请求？

    • 当用户改变主意、请求已过时或发生错误时，取消 Ajax 请求非常有用。

  2. 如何创建 AbortController 对象？

    • 在 JavaScript 中，可以使用 new AbortController() 创建一个 AbortController 对象。

  3. 如何在 Ajax 请求中使用 AbortController？

    • 通过在 Ajax 请求中传递 AbortController 生成的信号对象，可以在请求中使用 AbortController。

  4. 如何取消使用 AbortController 发起的 Ajax 请求？

    • 通过调用 AbortController 的 abort() 方法，可以取消使用 AbortController 发起的 Ajax 请求。

  5. 何时应该使用 ajaxWithCancelAndController 函数而不是 ajaxWithCancel 函数？

    • 当我们需要外部控制取消时，应该使用 ajaxWithCancelAndController 函数。