首页  >  文章  >  web前端  >  如何取消 JavaScript 中的预输入搜索承诺?

如何取消 JavaScript 中的预输入搜索承诺?

Patricia Arquette
Patricia Arquette原创
2024-10-29 18:58:02833浏览

 How Can I Cancel Promises in JavaScript for Type-Ahead Search?

Promise - 是否可以强制取消 Promise

在这种情况下,用户正在执行预先输入搜索,每次击键都会触发一个新的后端调用。随着用户输入速度加快,较旧的请求变得无关紧要,需要取消。

ES6 中的 Promise,就目前而言,不支持开箱即用的取消。然而,我们正在进行通过 AbortController 引入取消功能的工作,AbortController 是一种跨平台原语,可以取消网络请求等异步操作。

使用 AbortController

作为一种现代方法,AbortController 提供了一个信号可用于取消返回 Promise 的函数的对象。语法如下所示:

<code class="javascript">async function somethingIWantToCancel({ signal } = {}) {
  // Use the signal object to manually adapt code for cancellation support
  const onAbort = (e) => {
    // Handle cancellation logic here
  };
  signal.addEventListener('abort', onAbort, { once: true });
  try {
    const response = await fetch('...', { signal });
  } catch (e) {
    if (e.name === 'AbortError') {
      // Deal with cancellation in caller
    } else {
      throw e;
    }
  } finally {
    signal.removeEventListener('abort', onAbort);
  }
}</code>

在此示例中,somethingIWantToCancel 函数采用一个信号参数,该参数是 AbortController 的实例。 signal.addEventListener 侦听器为 abort 事件注册一个事件处理程序,该事件在操作取消时触发。 finally 块确保操作完成时删除事件侦听器。

替代方案

如果 AbortController 不是一个选项,另一种方法是使用第三方库,例如 Bluebird,它提供取消功能。

另一种选择是使用取消令牌。这涉及到将一个函数传递给可以调用以取消请求的方法。

结论

虽然 ES6 Promise 没有原生取消支持,但 AbortController 和其他替代方案提供了取消异步操作的方法在现代 JavaScript 中。对于较旧的场景,使用取消令牌或第三方库仍然可以提供解决方案。

以上是如何取消 JavaScript 中的预输入搜索承诺?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn