【dva】如何监听异步请求是否完成(页面loading)

方案1.你可以在model里面操作

在model里面的state里面声明一个变量state,默认是false,effect函数执行开始就将其改为true,然后等call()然后结束后又将其改为false.

 state{
  isloading:false,
  isEnd:false      //你也可以加一个变量去区分其状态
}

 yield put({
        type: 'save',
        payload: {
          isloading: true,
          isEnd: false,
        },
      });
      const res = yield call(query, payload);
      yield put({
        type: 'save',
        payload: {
          isloading: false,
          isEnd: true,
        },
      });

这种方案的好处是我自己写的逻辑,我自己随时可以调节加条件等. 缺点也很明显,需要额外加很多逻辑.

方案2.dva自带的loadingEffect

  const loadingEffect = useSelector((state) => state.loading);

我们先看看loadingEffect里面都有些啥

它是一个对象,包含三个属性,models、effect、global.

它反馈了所有dva的在此页面执行了的models和effects,其中global是任何页面都能拿到的.

effects

精确到了某个model下的单一effect函数,当它在执行时,loadingEffect对应的值就是true,执行完了或者未执行就是false.

let isLoading=loadingEffect.effects['baseInfo/queryAccess']

models

指某个models下面的所有effect函数全部执行完成之前就是true,执行完之后或者未执行就是false

let isLoading=loadingEffect.models['baseInfo']

我们需要明确需求,根据需要去决定使用effects还是models,如果页面上使用了models,那页面的组件发起dispatch时会更新loadingEffect的状态,引起页面重新刷新,也就是说,多个组件之间会被影响.我的另一篇博客中有类似的案例:子组件dispatch导致其他页面刷新问题解决