dva 有一个管理 effects 执行的 hook，并基于此封装了 dva-loading 插件。通过这个插件，我们可以不必一遍遍地写 showloading 和 hideloading，当发起请求时，插件会自动设置数据里的 loading 状态为 true 或 false 。然后我们在渲染 components 时绑定并根据这个数据进行渲染。
dva-loading的使用非常简单，在index.js中加入：
// 2. plugins app.use(createloading());
每个页面中将loading状态作为属性传入组件，在进行样式处理，比如转圈圈或者显示正在加载什么的，但是重点是，我们的app有多个页面，每个页面都这么做，很繁琐。
如何只做一次状态处理，每次请求期间都会触发loading状态呢，其实也很简单啦，因为dva-loading提供了一个global属性。
1、state中的loading对象
loading对象中的global属性表示的全局loading状态，models里是每个model的loading状态
所以我们根据state.loading.global指示全局loading状态。
2、一个父级组件
我们要向所有页面应用这个loading状态，那么我们可以在每个页面中使用一个父级组件来处理这个loading。上代码：
我要评论
import react from 'react';
import styles from './app.css';
import { connect } from 'dva';
import { activityindicator } from 'antd-mobile';
const timer = 800;
let timeoutid = null;
class app extends react.component {
state = {
show: false
}
componentwillmount() {
const { loading } = this.props;
if (loading) {
timeoutid = settimeout(() => {
this.setstate({
show: true
});
}, timer);
}
}
componentwillreceiveprops(nextprops) {
const { loading } = nextprops;
const { show } = this.state;
this.setstate({
show: false
});
if (loading) {
timeoutid = settimeout(() => {
this.setstate({
show: true
});
}, timer);
}
}
componentwillunmount() {
if (timeoutid) {
cleartimeout(timeoutid);
}
}
render() {
const { loading } = this.props;
const { show } = this.state;
return (
<div classname={this.props.classname}>
{ this.props.children }
<div classname={styles.loading}>
<activityindicator toast text="正在加载" animating={show && loading} />
</div>
</div>
);
}
}
const mapstatetoprops = (state, ownprops) => {
return {
loading: state.loading.global && !state.loading.models.verify
}
};
export default connect(mapstatetoprops)(app);
说明：
1、<activityindicator />是ant-design mobile的一个loading指示组件，animating属性指示显示与否，我们使用show和loading两个属性来控制显示与否。
2、为什么要show和loading两个参数，有个loading不就可以了吗？show的存在是为了实现一个需求：loading在请求发生的timer时间后出现，如果请求很快，小于timer时间，那么就不显示loading。如果没有这个需求，这个组件中可以只保留render()方法。
3、&& !state.loading.models.verify这个是做什么的？这个的作用是排除verify这个model对loading的影响，比如我不想在这个model对应的页面出现loading，可以在这里处理。
3、在router.js中使用这个父级组件
有了这个父级组件，那么在每个页面中加入这个父级组件，就可以实现loading，当然这个是可以在router.js中统一处理一下的。
比如：
<router history={history}>
<route path="/admin" component={app}>
<indexroute component={adminindex} />
<route path="movie_add" component={movieadd} />
<route path="movie_list" component={movielist} />
<route path="category_add" component={categoryadd} />
<route path="category_list" component={categorylist} />
<route path="user_add" component={useradd} />
<route path="user_list" component={userlist} />
</route>
</router>
这样，在进入/admin下的每个页面，都会加载app作为父组件。
总结
以上所述是小编给大家介绍的dva框架统一处理所有页面的loading状态，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
bootstrap-closable-tab可实现关闭的tab标签页插件
vue-cli单页面预渲染seo-prerender-spa-plugin操作
网友评论