React Hooks 是 React 16.8 中新增加的一个特性，允许在不编写 class 的情况下使用 state 和其他 React 特性。Hooks 是一种可重用 state 逻辑的方式，可以在函数组件中使用 state、生命周期等特性，从而大大简化了组件的编写和维护。
在写 React 组件的过程中，我们常常需要处理异步数据请求，而 Promise 可以让我们更方便地执行异步任务。本篇文章将介绍如何在 React Hooks 中使用 Promise 并提供相关经验与指导。
如何使用 Promise
在 React Hooks 中使用 Promise，我们可以使用 useState 来设置一个初始化状态和修改状态的方法。在异步操作执行成功后，我们可以调用该方法来更新状态。
我们可以创建一个获取 GitHub 用户信息的示例，如下所示：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- --------
-------- ----------- -
----- ----------- ------------- - ---------------
----- ------ -------- - ---------------
------------ -- -
-----------------------------------------------------------
-------------- -- -
-----------------------
--------------------
---
-- ------------------
-- ----------- -
------ ----------------------
-
------ -
-----
---------------------
---- --------------------- ---------------- --
------
--
-
------ ------- -----上述示例中，我们使用了 useEffect 来监听 username 的属性变化，并在变化后重新获取 GitHub 用户信息。在异步请求成功后，我们使用 setLoading(false) 来显示用户信息。
经验和指导
在使用 Promise 时，我们还需要注意一些问题。下面是一些经验和指导：
1. 处理 Promise 取消
在进行异步操作时，我们可能需要取消一些正在进行的操作。可以考虑使用取消令牌的方式取消 Promise。例如，我们在使用 axios 进行网络请求时，可以使用 CancelToken 来取消请求：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- --------
-------- ----------- -
----- ----------- ------------- - ---------------
----- ------ -------- - ---------------
------------ -- -
----- ----------- - ------------------
----- ------ - ---------------------
----------------------------------------------------------- -
------------ ------------
--
-------------- -- -
-----------------------
--------------------
--
------------ -- -
-- ----------------------- -
-------------------- ---------- ---------------
- ---- -
-------------------
-
---
------ -- -- -
------------------------ -------- -- --- --------
--
-- ------------------
-- ----------- -
------ ----------------------
-
------ -
-----
---------------------
---- --------------------- ---------------- --
------
--
-
------ ------- -----上述代码中，我们使用 CancelToken 来取消网络请求。创建一个 cancel 令牌并传递给网络请求的配置对象，以便在需要时取消请求。返回一个回调函数以在组件卸载时调用该令牌的 cancel 方法。
2. 处理 Promise 的错误
在调用 Promise 的 then 和 catch 方法时，我们需要注意错误处理。如果我们在 catch 中执行 throw 语句，将导致新的 catch 处理程序被调用，并且可能引发应用程序中未知的错误。
为了避免这种情况，我们应该在 catch 中执行 return 或 resolve，以阻止错误的进一步传播。例如：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- --------
-------- ----------- -
----- ----------- ------------- - ---------------
----- ------ -------- - ---------------
------------ -- -
-----------------------------------------------------------
-------------- -- -
-----------------------
--------------------
--
------------ -- -
---------------------
--------------------
---
-- ------------------
-- ----------- -
------ ----------------------
-
------ -
-----
---------------------
---- --------------------- ---------------- --
------
--
-
------ ------- -----
上述代码中，在 Promise 出现错误时，我们使用 setLoading(false) 方法将 isLoading 设置为 false，从而避免出现逻辑错误。
3. 减少 Promise 链式调用
当我们使用 Promise 进行操作时，可能会出现链式调用的情况，这会导致代码难以理解和维护。可以使用 async/await 来改善异步代码的可读性和可维护性。
例如，我们可以将前面的代码改为：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- ---- --------
----- -------- ----------------- -
--- -
----- -------- - ----- ------------------------------------------------------
------ --------------
- ----- ------- -
---------------------
-
-
-------- ----------- -
----- ----------- ------------- - ---------------
----- ------ -------- - ---------------
------------ -- -
----- -------- ----------- -
----- ---- - ----- ------------------------
--------------
--------------------
-
------------
-- ------------------
-- ----------- -
------ ----------------------
-
------ -
-----
---------------------
---- --------------------- ---------------- --
------
--
-
------ ------- -----上述代码中，我们使用 async/await 改善了代码的可读性和可维护性，取消了 Promise 链式调用的操作。
结论
在 React Hooks 中使用 Promise 可以提高代码的可读性和可维护性。我们需要注意处理 Promise 的取消和错误，并减少 Promise 链式调用的情况。综上所述，本文提供了使用 React Hooks 中 Promise 的经验和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c698ba336082f254125f3