npm 包 dva-loading 使用教程
前言
在 React + dva 项目中，数据的异步加载是一个很重要的部分。当用户点击某个按钮或链接时，要在界面上展示正在加载数据的效果，以此给用户反馈。很多前端开发人员使用了 Promise + Async/Await 方式处理异步请求，但是在一些复杂的场景中，需要手动地维护 isLoading 状态变量，这样会增加编码的复杂度。事实上，Redux 官方提供了一个叫做 redux-loading 的库，用于方便地处理 isLoading 变量，但并不能完全满足所有场景的需求。因此，本文介绍一个非常好用的第三方库：dva-loading。
什么是 dva-loading？
dva-loading 是 dva.js 的一个插件，用于处理数据的加载状态。它能够在 dva 应用中自动地维护 loading 状态，并且可以在全局或者局部进行配置，以满足不同的需求。
使用 dva-loading
首先，要在项目中安装 dva-loading：
npm install dva-loading --save
然后，在 dva 应用中进行配置。以全局配置为例，可以在 dva 的 config.js 文件中添加如下代码：
import createLoading from 'dva-loading';
export const dva = {
plugins: [createLoading()],
};这样，在任何一个 model 中，都可以通过调用 dispatch 函数来启动 loading 状态：
dispatch({ type: 'todos/fetch' });上述代码中，'todos/fetch' 是一个 action 类型，对应到具体的 model 中的 effect 函数。
effect 函数可以返回一个 Promise 对象，如下所示：
-- -------------------- ---- -------
------ ------- -
---------- --------
-------- -
-------- ------- -- - ----- --- -- -
----- ----- ----- ------------- ---
----- -------- - ----- ------------------- ---------
----- ----- ----- --------------- -------- -------- ---
----- ----- ----- ------------- ---
--
--
--在上述代码中，当 effect 函数开始执行时，先发送一个 showLoading 的 action，然后执行异步请求 fetchTodoList，再发送 fetchSuccess 的 action，最后发送 hideLoading 的 action。
dispatch 函数会调用 dva-loading 提供的 effects 中的 start 和 end 函数，以便在 model 中自动地启动和关闭 loading 状态。因此，当 effect 函数执行完成之后，可以自动地取消 loading 状态。
如果想要在局部配置 loading 状态，可以使用下面的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------
-------- ---------- ------ -------- -------- -- -
------ -
-----
------- ----------- -- ---------- ----- ------------- ----
------------------------------- - ------------ - ------ -------
---------
----
----------------- -- -
--- -------------------------------
---
-----
------
--
-
------ ------- ---------- ------ ------- -- -- -- ------ ------- --------------上述代码中，在 TodoList 组件中，通过 loading.effects['todos/fetch'] 判断异步请求是否正在加载数据。如果正在加载，按钮会显示 Loading...，否则会显示 Fetch Todos。
总结
dva-loading 是一个非常好用的库，可以方便地处理异步请求的 loading 状态。通过本文的介绍，您已经知道了如何在 dva 应用中使用 dva-loading。希望本文能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3df2ebdbf7be33b256713f