我正在開發一個 React 應用程式（這并不重要，因為我要解釋的內容也可能在其他情況下發生。）
我有三個異步函式，我們稱它們為func1and func2，func3這就是它們的外觀。這是這些函式的一般模式。
const func1 = async ()=>{
try {
// do something
const resultForFunc2 = // the end result of doing something that is going to be used in func2
return {statusCode: 200, body: resultForFunc2, error: null}
} catch(err) {
console.log("Error in executing func1", err)
return {statusCode: 400, body: null, error: err}
}
}
現在呼叫這些函式的方式是func1回傳一個在中使用的值，func2并func2回傳一個在中使用的值func3。
所以我是這樣稱呼他們的：
const all = async () => {
const response1 = await func1();
if (response.statusCode === 200) {
const response2 = await func2(response1);
if (response2.statusCode === 200) {
const response3 = await func3(response2);
if (response3.statusCode === 200) {
return { statusCode: 200, body: response3.body, error: null };
} else {
return { statusCode: 400, error: response3.error, body: null };
}
} else {
return { statusCode: 400, error: response2.error, body: null };
}
} else {
return { statusCode: 400, error: response.error, body: null };
}
}
這對我有用，因為我在 React 組件中呼叫了上述all函式， useEffect()例如，每當我得到 400 時，我都會statusCode設定一個錯誤狀態變數true，然后顯示一個錯誤螢屏（我想出了這個想法，所以請隨意批評它，我實際上很欣賞它）。但不好的是，我有這么多if的嵌套，讓代碼變得丑陋、骯臟、難以閱讀和除錯。有誰知道我如何在不使用嵌套ifs 的情況下獲得上述代碼塊的好處。謝謝你。
uj5u.com熱心網友回復：
也許試試這種方法。我沒有測驗它，但我想它應該對你有幫助
const all = async () => {
let funcs = [func1, func2, func3];
let res;
for (const f of funcs) {
let { statusCode, body, error } = await f();
if (statusCode !== 200) return { statusCode, error };
res = body;
}
return res;
};
uj5u.com熱心網友回復：
這可能是代碼審查的好問題
我有兩個減少嵌套的想法。一種是使用 catch 函式而不是 try catch 塊，即
const err = e => console.error(e);
const func1 = async () => {
// do something
const resultForFunc2 = // the end result of doing something that is going to be used in func2
return {statusCode: 200, body: resultForFunc2, error: null}
}
const result1 = await func1.catch(err);
另一個想法是在失敗時退出，而不是將繼續的代碼嵌套在塊中。IE
const all = async () => {
const response1 = await func1().catch(err);
if (response.statusCode !== 200) return { statusCode: 400, error: response.error, body: null };
const response2 = await func2().catch(err);
if (response2.statusCode !== 200) return { statusCode: 400, error: response2.error, body: null };
//and so on
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/466175.html
標籤：javascript 节点.js 反应 异步等待 嵌套如果
上一篇：達到某個值時如何發出警報
下一篇：從物件陣列中提取值？