【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導致其他頁面刷新問題解決