前言
在进行前端开发时，难免会遇到需要处理异步请求或者并行执行多个请求的情况。这时候，我们需要统一管理所有请求的 loading 状态，以便更好地展示 UI 和提供用户体验。
@chegg/redux-loading-queue 是一个基于 redux 的 npm 包，可以很好地帮助我们管理 loading 状态。下面将详细介绍该包的使用教程。
环境准备
在使用 @chegg/redux-loading-queue 之前，需要先在项目中安装 redux，并且保证已经引入了 redux。在此基础上进行下一步的操作。
安装
在安装 @chegg/redux-loading-queue 之前，需要先安装 redux-thunk。然后，通过 npm 安装 @chegg/redux-loading-queue：
npm install @chegg/redux-loading-queue --save
安装完成后，我们需要在 createStore 中引入中间件：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ - ---------- - ---- ----------------------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------------- ----------- --
这样就完成了 @chegg/redux-loading-queue 的安装和引入。
使用教程
添加请求
在页面中需要进行异步请求时，我们需要先添加请求到 loading queue，以便管理该请求的状态。
import { add } from '@chegg/redux-loading-queue';
add('LOGIN', 'LOADING');在以上代码中，add 函数接受两个参数，分别是 queue 和 name。queue 表示这个请求所属的队列，可以根据队列名称来对不同的请求进行分类。name 表示这个请求的名称。
开始请求
在异步请求开始之前，我们需要通知 loading queue 开始请求。以便更新该请求的 loading 状态。
import { start } from '@chegg/redux-loading-queue';
start('LOGIN');在以上代码中，start 函数接受一个参数，表示要开始请求的请求名称。
结束请求
当异步请求结束时，我们需要通知 loading queue 请求已经结束，以便更新该请求的 loading 状态。
import { end } from '@chegg/redux-loading-queue';
end('LOGIN');在以上代码中，end 函数接受一个参数，表示请求结束的请求名称。
获取 loading 状态
如果需要在 UI 中展示 loading 状态，我们需要先获取 loading queue 中的状态。
import { isLoading } from '@chegg/redux-loading-queue';
isLoading('queueName', 'requestName');以上代码将返回 true 或者 false，表示该请求是否在 loading 状态中。
使用示例
下面提供一个使用示例。假设我们有一个登录的按钮，当用户点击该按钮时，需要进行登录请求，同时需要展示 loading 状态。
首先，我们需要在 componentDidMount 中添加登录请求。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --- - ---- -----------------------------
------ - ----- - ---- ------------
----- --------- ------- --------------- -
------------------ -
-------------
------------ -----------
-
----------- - -- -- -
----- - ----- - - -----------
--------
--
-------- -
----- - --------- - - -----------
------ -
-----
------- -----------------------------------------
---------- -- ----------------------
------
--
-
-
----- --------------- - ----- -- -
------ -
---------- -------------------- --------
--
--
----- ------------------ - -------- -- -
------ -
------ -- -- -----------------
--
--
------ ------- --------
----------------
------------------
-------------在以上代码中，我们在 constructor 中使用 add 函数添加了 LOGIN 请求到 LOADING 队列中，然后在 handleClick 中调用了 login 函数。同时，我们在 UI 中根据 isLoading 值来展示 Loading 状态。
在 login 函数中，我们需要在请求开始时调用 start 函数，在请求结束时调用 end 函数，以便更新 LOADING 队列中的该请求的 loading 状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ --- - ---- -----------------------------
------ - ------------- - ---- ----------------
------ ----- ----- - -- -- -
------ -------- -- -
---------------
------------------------------------------------------------------ -- -
----------
----- --------------
-------- --------
---
-------------
---
--
--这样，我们就完成了一个简单的登录请求，并使用了 @chegg/redux-loading-queue 来管理该请求的 loading 状态。
总结
@chegg/redux-loading-queue 是一个非常实用的 npm 包，可以帮助我们很好地管理多个异步请求的 loading 状态，提升用户体验。在使用该包时，需要先引入 redux 和 redux-thunk。然后，通过 add、start 和 end 函数来管理 loading 状态。最后，通过 isLoading 函数来获取 loading 状态并应用到 UI 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662281e8991b448e1fcc