在前端开发中，我们经常需要与后端交互，发送网络请求。然而，网络请求并不总是能成功返回数据，有时候会遇到各种错误，比如网络超时、404 等。如何在 Redux 中处理这些网络请求的错误呢？本文将详细介绍这个问题，并提出一些解决方案。
Redux 中处理错误的方式
在最初的 Redux 中，常常使用一个对象来表示异步请求的状态，包括以下3个属性：
{
loading: false, // 请求是否正在进行中
data: null, // 请求成功后返回的数据
error: null // 请求失败的错误信息
}这个对象通常会被存放在 Redux 的 Store 中，而一次网络请求的结果，可以通过 dispatch 一个 Action 来更新这个对象。
然而，这个方式有很多不足之处。最明显的问题是它忽略了一种情况：多个请求同时发送，而它们中的某一个请求失败了。此时，我们只能捕捉到其中一个失败的请求，它的错误信息会覆盖其他请求的错误信息。因此，这个方式不能够完全解决网络请求的错误问题。
为了解决这个问题，Redux 社区推出了另外一种处理错误的方式：使用中间件。最常用的中间件是 Redux Thunk 和 Redux-Saga。
使用 Redux Thunk 处理网络请求
Redux Thunk 是 Redux 的一个中间件，它允许我们在 action 中使用异步的代码。通常，这个异步代码会发起一个 AJAX 请求，并在请求结束后 dispatch 一个 action。这里有一些使用 Redux Thunk 处理网络请求的例子：
-- -------------------- ---- -------
-- ---------
------ ----- --------- - -- -- -
------ ----- ---------- -- -
--- -
----- -------- - ----- ----------------------
----- ---- - ----- ----------------
---------- ----- --------------------- -------- ---- ---
- ----- ------- -
---------- ----- --------------------- -------- ----- ---
-
--
--上面这个例子中，使用了一个名为 fetchData 的 action 进行异步请求。在使用 Redux Thunk 处理异步请求时，每一个 action 都应该返回一个函数而不是一个普通的 Action 对象。这个函数通常有一个名为 dispatch 的参数，它允许我们 dispatch 更多的 action。dispatch 可以是同步或异步的，它的行为取决于你 dispatch 的 action。
在我们的例子中，我们 fetch 了一个 api/endpoint 地址，并在请求结束后进行了一些处理。如果返回的数据有效，我们会 dispatch 一个 FETCH_DATA_SUCCESS 的 action，否则，我们会 dispatch 一个带有错误信息的 FETCH_DATA_FAILURE 的 action。
使用 Redux-Saga 处理网络请求
Redux-Saga 是另外一个流行的 Redux 中间件，它被设计用于处理异步代码和副作用。虽然学习曲线比 Redux Thunk 更高，但在复杂的项目中，Redux-Saga 提供了更好的可读性和可重用性。以下是使用 Redux-Saga 处理网络请求的例子：
-- -------------------- ---- -------
-- -------
------ - ----- ---- ---------- - ---- ---------------------
------ - ----------------- ---------------- - ---- ------------
--------- ----------- -
--- -
----- -------- - ----- ----------- ----------------
----- ---- - ----- ----------------
----- ----------------------------
- ----- ------- -
----- -----------------------------
-
-
------ --------- ---------- -
----- ------------------------ -----------
-在这个例子中，我们使用了一个名为 fetchData 的 Generator 函数。Generator 函数使用 yield 关键字，这是通过 Redux-Saga 来处理异步操作的方式。在 Generator 函数中，我们调用了 call 函数来发起一个 AJAX 请求，如果这个请求成功，我们就使用 put 函数 dispatch 一个成功的 action，否则，我们就使用 put 函数 dispatch 一个带有错误信息的失败 action。
使用 takeLatest 函数，我们将 fetchData 函数和 FETCH_DATA 变为了一个监听器。FETCH_DATA 变量是我们想要使用 Saga 处理的 action 类型。在 takeLatest 函数中，我们告诉 Saga 监听并处理 FETCH_DATA action。如果有多个 FETCH_DATA action，该函数将只处理最后一个 action。
处理网络请求失败的最佳实践
在处理网络请求失败时，有一些最佳实践可以让你更好地控制错误信息，并展示给用户：
提供可处理的错误信息。当请求出错时，我们应该提供一个有意义的错误信息。例如，如果请求失败是由于网络问题引起的，我们可以提示用户检查网络连接。
记录错误信息。当应用因为网络请求失败而出错时，我们可以将错误信息记录在日志中。这样，在处理错误时，我们就可以追踪并排除错误。
展示错误信息。当请求失败时，我们应该展示一个适当的错误信息。这个错误信息应该足够清晰，让用户知道他们可以做什么。例如，可以提示用户重新尝试请求，或者修改请求参数。
结论
网络请求失败是我们在前端开发中常常遇到的问题。在 Redux 中，我们可以使用 Redux Thunk 或者 Redux-Saga 两个中间件来处理异步请求。无论你选择哪一种方式，记得提供一个有意义的错误信息，记录错误信息并展示错误信息。这些最佳实践可以帮助你快速地定位和解决错误，并提高用户体验。
示例代码
以上所述的例子代码，可以在以下代码仓库中找到：
- Redux Thunk 示例
- Redux-Saga 示例
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67001156485b53fc16b96954