前言
redux-loading-promise-middleware 是一个用于 Redux 的中间件，它可以在应用程序中实现加载指示器。它的主要作用是在发起异步操作的同时显示一个 loading 效果，以提高用户体验。本文将深入讲解如何使用该 npm 包来为你的 Redux 应用程序添加加载指示器。
安装
在你的应用中安装 redux-loading-promise-middleware，可以使用如下的 npm 命令：
npm install redux-loading-promise-middleware --save
安装完成后，你需要把该中间件添加到你的 Redux Store 中：
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- -------- ------ ----------------- ---- ----------------------------------- ------ ----------- ---- ------------- -- ----- ------- ----- ----- - ------------ ------------ ---------------------------------- -- ------ ------- ------
使用
在你的应用程序中发起异步操作时，你需要在 action 中添加一些参数，以通知 middleware 去执行相应的操作。可以使用以下参数：
promise：一个返回 Promise 的函数，该函数将异步操作的结果作为 Promise 的返回值；types：一个包含三个字符串的数组，用于异步操作的 start、success 和 failure 的 action type；options：可选参数，用于定制 middleware 的行为。
以下是一个使用 redux-loading-promise-middleware 的示例代码：
export const fetchPosts = () => ({
types: ['FETCH_POSTS_REQUEST', 'FETCH_POSTS_SUCCESS', 'FETCH_POSTS_FAILURE'],
promise: () => fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json())
});以上代码中，我们定义了一个名为 fetchPosts 的 action，它包含了三个 types 分别是 FETCH_POSTS_REQUEST、FETCH_POSTS_SUCCESS 和 FETCH_POSTS_FAILURE。同时，我们将 fetchPosts 的 promise 设置为一个返回 Promise 的函数，该函数会发起异步请求获取文章数据。当异步操作开始时，这个 action 的类型为 FETCH_POSTS_REQUEST，我们可以根据这个 type 去显示 loading 效果。当异步操作结束时，我们可以根据结果来判断是否需要显示相应的错误信息。
定制
在实际使用过程中，你可能需要定制 middleware 的一些行为，redux-loading-promise-middleware 提供了以下可选参数：
disableThrowWhen：一个可选的函数，用于禁用 middleware 在一定条件下抛出异常。默认情况下，当遇到错误时，middleware 会抛出错误，你可以通过该函数禁用这个功能。示例代码如下：
const options = {
disableThrowWhen: error => error.code === 'ECONNREFUSED' // 当 error 的 code 为 ECONNREFUSED 时，不抛出异常。
}onSuccess和onFailure：两个可选的函数，用于处理各自的 action。这些函数会在 action 执行成功或失败后被调用。
-- -------------------- ---- -------
----- ------- - -
---------- ------- ----- ------- -- -
------------------- ----------------
-------------
--
---------- ------- ----- ------- -- -
------------------- ----------------
-------------
-
-onStart和onFinish：两个可选的函数，用于处理异步操作开始和结束时的 action。
-- -------------------- ---- -------
----- ------- - -
-------- ------- ----- ------- -- -
------------------- -------------
-------------
--
--------- ------- ----- ------- -- -
------------------- -------------
-------------
-
-结语
redux-loading-promise-middleware 是一个非常实用的 npm 包，它可以帮助我们在 Redux 应用中实现加载指示器。本文介绍了如何安装、使用和定制该 middleware。希望本文对你的学习和开发有所帮助。如果你有任何疑问或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a91