Promise 中如何处理取消请求-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要向后端发送请求获取数据。但是，如果用户在请求还未完成时离开了当前页面，这个请求就没有继续的必要了。为了避免这种无用的请求，我们需要在 Promise 中处理取消请求的问题。

Promise 中的取消请求

在 Promise 中，取消请求的实现方式有两种：通过 AbortController 和手动实现。

通过 AbortController 实现取消请求

AbortController 是一个新的 Web API，它可以用于取消 fetch 请求。下面是一个使用 AbortController 取消请求的示例代码：

// javascriptcn.com 代码示例
const controller = new AbortController();
const { signal } = controller;

fetch(url, { signal }).then(response => {
  // 处理响应数据
}).catch(error => {
  // 处理错误
});

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

在上面的代码中，我们首先创建了一个 AbortController 对象，然后从中获取 signal 属性，并将其传递给 fetch 函数。当我们需要取消请求时，只需要调用 controller.abort() 即可。

手动实现取消请求

在一些情况下，我们无法使用 AbortController 来取消请求。这时，我们可以手动实现取消请求。下面是一个手动实现取消请求的示例代码：

// javascriptcn.com 代码示例
function fetchWithCancel(url, options) {
  let cancel;

  const promise = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.open(options.method || 'GET', url);

    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };

    xhr.onerror = function() {
      reject(xhr.statusText);
    };

    xhr.onabort = function() {
      reject('abort');
    };

    xhr.send(options.body);

    cancel = function() {
      xhr.abort();
    };
  });

  return { promise, cancel };
}

const { promise, cancel } = fetchWithCancel(url, { method: 'POST' });

promise.then(response => {
  // 处理响应数据
}).catch(error => {
  if (error === 'abort') {
    console.log('请求已取消');
  } else {
    console.error(error);
  }
});

// 取消请求
cancel();

在上面的代码中，我们首先定义了一个 fetchWithCancel 函数，它返回一个包含 promise 和 cancel 函数的对象。当我们需要取消请求时，只需要调用 cancel() 函数即可。

总结

通过使用 AbortController 或手动实现取消请求，我们可以有效地避免无用的请求。在实际开发中，我们应该根据具体情况选择适合自己的方式来处理取消请求的问题。

参考资料

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6587d968eb4cecbf2dd10ee6