for ReactJs : axios回傳的response值是 「undefined」!?

 實驗預期對的東西,是必須的,

然而,實驗"錯誤狀況"有無落實,更是一個系統良窳之所在

一般在react js用到axios都是用 promise的寫法:

 axios.get(url,body,header.....).then(response=>......).catch(error=>);

但是如果上述的url錯誤,或是權限問題,造成錯誤

執行上述的結果通常是「response is undefined」,更別就在then(....)裡做resp.data.....解析

就這樣丟出一個 「undefined」錯誤,誰看得懂啊

如何是好?

 如果,不要用要axios預設的包裝機制--我們把http狀態解釋權拿回來,會不會好一點?

是的,axios也有想到這點,所以有了這個設定參數「validateStatus:false」

奪回解釋權,axios負責傳送接收,接下來就是我們事了

-------以下雖然是用saga,但基本工作原理是一樣的------

--以udemy 課程「React-The complete Guide」 sample code : buger app為例-----

export function* doFetchOrderProcessBySaga(action) {

  yield put(actions.doBeginFetchOrders());

  /*

  const authState = yield select((state) => state.auth);

  const token = authState.token;

  const userId = authState.userId;

  */

  //let's finish above 3 command in one line

  const { token, userId } = yield select((state) => state.auth);

  const queryParam =

    "?auth=" + token + '&orderBy="userId"&equalTo="' + userId + '"';

  try {

    const resp = yield axios.get("/orders.json" + queryParam, {

      validateStatus: false

    });

    //if hoc/withErrorHandler instead of "withErrorHandler_class"

    //please DO NOT return by 「yield put(actions.fetchOrdersSeccess([]));」,or users can not see the error message &  Modal

    //(don't ask me  why)

    // if (!resp || resp === undefined) {

    //   yield put(actions.fetchOrdersFailed("return undefined.please check URL"));

    //   return;

    // }

    if (resp.status !== 200) {

      yield put(

        actions.fetchOrdersFailed(

          "ERROR:" + resp.status + " " + resp.statusText

        )

      );

      return;

    }

    let orderTmp = [];

    for (let key in resp.data) {

      orderTmp.push({

        ...resp.data[key],

        id: key

      });

    }

    yield put(actions.fetchOrdersSeccess(orderTmp));

  } catch (err) {

    yield put(actions.fetchOrdersFailed(err.message));

  }

}

-------------------------------------------

驗證:

切到"orders"單元,在orders.js初次render時下載訂單資訊為例.

如果是正常的話,是如以下畫面

現在,到firebase realtime database  ,去修改api權限一下

(改完了別忘了「發布」才會生效)

之後,我們在react js app 切到別單元再進到Orders這裡,出現了權限問題

(應該的,不出現error才該打屁股了)

這樣,是不是明確多了?

參考連結:

https://stackoverflow.com/questions/54185997/how-to-get-axios-error-response-into-the-redux-saga-catch-method?rq=1

https://stackoverflow.com/questions/48298890/axios-how-to-get-error-response-even-when-api-return-404-error-in-try-catch-fi

https://github.com/redux-saga/redux-saga/issues/1730

http://codestudyblog.com/questions/sf/0421204826.html

以上,大家加油了