Promise 异步操作的取消

在前端开发中，异步操作是非常常见的，例如发送 AJAX 请求、定时器等。在异步操作中，我们经常会遇到需要取消操作的情况，例如用户在做某个操作时，突然想取消，或者页面切换时需要取消之前的操作。而 Promise 提供了一种方便的方式来取消异步操作。

Promise 的取消

在 Promise 中，我们可以使用一个标志位来判断是否需要取消异步操作。例如下面的代码：

// www.javascriptcn.com code example
let isCanceled = false;

const promise = new Promise((resolve, reject) => {
  // 异步操作
  // ...

  if (isCanceled) {
    reject(new Error('Canceled'));
  } else {
    resolve(result);
  }
});

// 取消操作
isCanceled = true;

在上面的代码中，我们使用一个变量 isCanceled 来表示是否需要取消异步操作。当我们需要取消操作时，将其设置为 true，Promise 的状态将会变为 rejected，并且传递一个错误对象作为参数。

取消操作的指导意义

Promise 的取消操作可以帮助我们更好地管理异步操作，避免无用的资源浪费和性能问题。例如，当用户在输入框中输入搜索关键字时，我们可以使用 Promise 来发送 AJAX 请求，当用户修改关键字时，取消之前的请求，减少不必要的网络请求。

另外，在一些长时间的异步操作中，例如上传文件、下载大文件等，我们也可以使用 Promise 的取消操作来优化用户体验，让用户可以随时取消操作，避免等待时间过长。

示例代码

下面是一个使用 Promise 取消操作的示例代码，该代码实现了一个搜索框，当用户输入关键字时，发送 AJAX 请求进行搜索，当用户修改关键字时，取消之前的请求。

<input id="search-input" type="text" placeholder="Search...">
<div id="search-results"></div>

// www.javascriptcn.com code example
let isCanceled = false;

function search(query) {
  const url = `https://api.github.com/search/repositories?q=${query}`;

  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (isCanceled) {
        reject(new Error('Canceled'));
        return;
      }

      if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        resolve(data.items);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Network Error'));
    };
    xhr.send();
  });
}

let lastSearch = null;

document.getElementById('search-input').addEventListener('input', (event) => {
  const query = event.target.value.trim();

  if (lastSearch) {
    isCanceled = true;
    lastSearch.catch(() => {});
  }

  if (query) {
    isCanceled = false;
    lastSearch = search(query);
    lastSearch.then((results) => {
      const resultsEl = document.getElementById('search-results');
      resultsEl.innerHTML = '';
      results.forEach((result) => {
        const itemEl = document.createElement('div');
        itemEl.innerText = result.full_name;
        resultsEl.appendChild(itemEl);
      });
    }).catch((error) => {
      console.error(error);
    });
  } else {
    const resultsEl = document.getElementById('search-results');
    resultsEl.innerHTML = '';
  }
});

在上面的代码中，我们使用了一个变量 lastSearch 来保存上一次的搜索请求。当用户修改关键字时，我们先取消上一次的请求，然后发送新的请求。在发送请求时，我们使用了一个标志位 isCanceled 来判断是否需要取消异步操作。在 Promise 的状态变为 rejected 后，我们使用了一个空的 catch 方法来消费错误，避免在控制台中输出错误信息。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8e205a941bf7134fdff07