實驗預期對的東西,是必須的,
然而,實驗"錯誤狀況"有無落實,更是一個系統良窳之所在
一般在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
以上,大家加油了
