antd-pro中控制loading的dva-loading使用(React)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/sinat_42338962/article/details/98340667

前言：

我们原来写loading状态的方法是，在异步请求的开始的时候开启loading，在异步请求的结束关闭loading，

这样的写法是比较麻烦的，因为这个操作都是一致的，在ant Design pro中就提供了dva-loading插件，封装的很好，用起来也很方便，主要就是直接监听异步的effect，分别在开始和结束的时候改变loading状态，所以是和dva结合在一起用的,下面时使用方法：

1. 插件引入

import createLoading from 'dva-loading';
const app = dva();
app.use(createLoading());

2. 使用

2.1 . 引用：在项目上注册之后routes组件会有loading对象

@connect(({ app, loading }) => ({ app, loading }))(App);

2.2. 三种使用方案：

a.监听单个effect

let isLoading = loading.effects['order/getList'] //监听role下的addRole的异步请求

b.监听某个模块下的所有异步请求

let isLoading = loading.models.order,

c.全局监听所有异步请求

let isAllLoading = loading.global()

在异步请求是loading变量会为true，完成后会变成false，用来控制加载动画

2.3. 结合项目实例

@connect(({loading }) => ({
  loading1: loading.effects['order/getList'], //指定请求
  loading2: loading.models.order,			  //指定某模块下所有请求
  loading3: loading.global()				  //指定全局所有请求
}))
class TestReact extends Component {
	render () {
		const { loading } = this.props;
		return (<Table loading={loading} />）
	}
}

就酱紫啦~~~