umi項目中dva effects異常處理

問題描述：

一、使用Antd的Modal的Confirm 若是返回一個Promise，它會本身關閉 loading狀態。在使用過程當中，已經返回了Promise，在後端報錯的時候，loading並無消失，當時的臨時處理方案爲，在相應的 effects添加 try catch

// Effects
*getList({ payload }, { call }) {
  try {
    return yield call(getList, payload);
  } catch (err) {
    return Promise.reject(err);
  }
},

二、出現過一個問題，後端接口異常，在dva effects中沒有進行異常處理，結果阻塞下面的流程，正常的邏輯是，上一次報錯了，這一次應該能夠正常請求。添加try catch後問題獲得解決。

看完以上的問題描述，你可能會有一下問題：

• 爲何不加try catch 會阻塞流程？
• 是否是每一個effects都要添加try catch的處理？
• 有沒有地方能夠統一處理這些錯誤？

帶着上面這些問題接着往下看：

dva effects異常

// Effects
*getList({ payload }, { call }) {
    return yield call(getList, payload);
},

此時若是後臺服務器返回錯誤，會致使call Effect拋出異常，最終會致使generator 中止運行。解決的方法是能夠加上try catch，例如

*getList({ payload }, { call }) {
  try {
    return yield call(getList, payload);
  } catch (err) {
    return Promise.reject(err);
  }
},

可是這樣的話，須要每次調用時都try catch，所以須要統一異常處理。

統一異常處理

Ant Design封裝的是umi，umi封裝了dva，dva封裝了redux-saga。統一異常處理能夠在umi中進行。官方文檔^[1]中說明以下：

dva裏，effects和subscriptions的拋錯所有會走onError hook，因此能夠在onError裏統一處理錯誤。

在 src 目錄下新建 app.js，內容以下：

export const dva = {
  config: {
    onError(e) {
      e.preventDefault();
      console.error(e.message);
    },
  },
};

而後effects裏的拋錯和reject的promise就都會被捕獲到了。

固然若是某個effects須要作特殊的異常處理邏輯，則須要在定義這個effects的地方單獨添加try catch進行處理。

總結

• 每一個effects都須要使用 try catch 作異常處理。
• umi提供了統一處理的配置，若是有特殊邏輯，則須要單獨添加處理邏輯。

參考資料

[1]

官方文檔: https://github.com/umijs/umi/blob/umi%402.3.1/docs/zh/guide/with-dva.md

本文分享自微信公衆號 - 牧碼的星星（gh_0d71d9e8b1c3）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。