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

Dear 丶 2021-11-10 16:06 1276阅读 0赞

### 前言： ###

我们原来写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} />）
    	}
    }

就酱紫啦~~~

发表评论取消回复

表情：

评论列表（有 0 条评论，1276人围观）

还没有评论，来说两句吧...

相关阅读

相关 element-ui中使用loading

我们通过接口调取数据时，有那么一两秒的时间，是在动态的加载数据，有可能会出现一个暂无数据的尴尬场景，这个时候，我们可以用到loading了。我们可以以下面这种优雅的方...

素颜马尾好姑娘i/ 2024年04月18日 16:15/ 0 赞/ 27 阅读

相关 axios封装中使用loading

先安装 npm install axios npm i element-ui -S 在main.js中引入 // vant按需引入 //i

旧城等待，/ 2023年01月07日 04:56/ 0 赞/ 289 阅读

相关 React中ref的使用

一、类式组件使用Ref 1、字符串 Refs > 官方目前`不推荐使用`这种方式创建Ref，因为这种方式存在一些问题，影响效率，可能会在后续版本移除 step

ゝ一世哀愁。/ 2022年11月15日 11:29/ 0 赞/ 205 阅读

相关 React 中style的使用

React中style的使用和直接在HTML中使用有些不同，第一，React中必须是style="opacity:\{this.state.opacity\};"这种写

待我称王封你为后i/ 2022年08月10日 00:46/ 0 赞/ 169 阅读

相关 jQuery中load的使用

$(elements).load(fn)这个功能是elements元素完全加载后触发fn方法, 如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和

矫情吗；*/ 2022年05月25日 03:40/ 0 赞/ 138 阅读

相关 react中ref的使用

一、简单讲解 1.When to Use Refs There are a few good use cases for refs: Managing focu

r囧r小猫/ 2022年04月05日 16:20/ 0 赞/ 266 阅读

相关 react中key的使用

面试题: 1). react/vue中的key的作用/内部原理 2). 为什么列表的key尽量不要用index 1. 虚拟DOM的key的作用? 1).

分手后的思念是犯贱/ 2021年12月09日 06:09/ 0 赞/ 228 阅读

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

前言：我们原来写loading状态的方法是，在异步请求的开始的时候开启loading，在异步请求的结束关闭loading，这样的写法是比较麻烦的，因为这个操作都是一

Dear 丶/ 2021年11月10日 16:06/ 0 赞/ 1277 阅读

相关 react-router中进行路由控制

前言在一个复杂的SAP应用中，我们可能需要根据用户的角色控制用户进行页面的权限，甚至在用户进入系统之前就进行权限的控制。本文就此一权限控制进行讨论。本文假设读者了解Re

心已赠人/ 2021年09月15日 15:32/ 0 赞/ 307 阅读

相关 ant中的loading按钮使用

![20200805142619352.png][] ![在这里插入图片描述][20200805142626359.png] ![在这里插入图片描述][watermar

傷城~/ 2021年07月24日 23:23/ 1 赞/ 989 阅读