使用 AbortController 管理异步请求

阅读时长 4 分钟读完

在编写前端应用程序时,我们经常需要管理一些异步请求。有时这些请求可能需要被中止,例如当用户切换页面或组件卸载时。此时,AbortController 可以派上用场。

AbortController 是什么?

AbortController 是一个可以用来管理异步请求的 API。它提供了一个 signal 对象,该对象可以用于中止正在进行的请求。

如何使用 AbortController?

首先,我们需要安装 abort-controller 包:

然后,在我们的代码中实例化一个 AbortController 对象,并将其传递给我们的异步请求:

-- -------------------- ---- -------
------ - --------------- - ---- -------------------

----- ---------- - --- ------------------

-------------- - ------- ----------------- --
  -------------- -- ----------------
  ---------- -- -
    -- ------
  --
  ------------ -- -
    -- ----------- --- ------------- -
      ----------------------
    - ---- -
      --------------------- -------
    -
  ---

在我们的请求中,我们将 AbortController 的 signal 属性传递给 fetch() 方法,并在 catch() 块中处理 AbortError。我们还可以在任何时候调用 AbortController 的 abort() 方法来中止请求:

在 React 中使用 AbortController

在 React 中,我们可以使用 useEffect 钩子来创建和取消 AbortController:

-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ - --------------- - ---- -------------------

-------- ------------- -
  ----- ------ -------- - ---------------
  ----- ------- --------- - ---------------

  ------------ -- -
    ----- ---------- - --- ------------------

    -------------- - ------- ----------------- --
      -------------- -- ----------------
      ---------- -- --------------
      ------------ -- -
        -- ----------- --- ------------- -
          ----------------------
        - ---- -
          ----------------
        -
      ---

    ------ -- -- -
      -------------------
    --
  -- ----

  -- ------- -
    ------ ----------------------------
  -

  -- ------- -
    ------ ------------------
  -

  ------ -
    -- ----
  --
-

在这个例子中,我们使用了 useEffect 的清除函数来取消 AbortController。这确保了当组件卸载时,我们的请求会被正确中止。

总结

AbortController 是一个非常有用的 API,可以让我们更好地管理异步请求。使用 AbortController 可以使我们的代码更可靠,并且可以帮助我们避免内存泄漏和其他问题。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/50642

纠错
反馈