react使用dva解决接口请求时间过长页面接收不到数据问题

一、什么是dva

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。具体永发特性请看dva官网api.（我的理解就是react框架中加了redux数据管理模块，只不过是集成进去了，不用手动去创建redux的action,store等等）。

二、上述问题解决方案

我在用这个react+dva.js的时候，遇到了一个问题，用fetch发送请求，如果速度很快，页面里用this.props很快能拿到立即渲染，如果接口很慢的话会出现各种问题

1.如果用接口得数据进行了一些判断，因为还没有拿到数据会导致页面直接报错。

2.会导致页面空白对用户体验造成了很不好的影响。

解决方案：

1.在组建总使用this.propsdispatch市可以加上。.then()的方法。dva支持链式操作。

 this.props.dispatch({//提交接口请求
      type: "settlstatistics/querytSettlstatistics",
    }).then((res) => {
      var data=res.payload.number;
      if(data.msg=="success"){
        this.setState({
          number:data.data
        })
      }else{
        message.error(data.msg)
      }
   
    })

2.在model里要返回结果很重要（要不然拿不到）。

 *queryCjtjScatter({ payload }, { call, put }) {
            const result = yield call(
                queryHttp,
                apiUrl.queryCjtjScatter,
                payload
            );
            const res = reqResult(result.data);
           return yield put({//记住return
                type: "setState",
                payload: {
                    cjtjData: res.data,
                },
            });
        }