我似乎無法弄清楚如何在回圈中設定陣列的值......
正如您在下面看到的，我從資料庫中檢索一些值并回圈遍歷這些值。
我在這里嘗試做的事情大致可以概括為以下幾點：
- request_1(pk)
- 然后從該客戶那里獲取所有預訂 ID
- 然后我得到預訂清單
- 遍歷所有預訂以獲取包括產品 ID 在內的詳細資訊
- 請求_2
- 再次回圈遍歷 id 并獲取每個產品的詳細資訊
- 請求_3
然后我嘗試存盤我得到的那些值，但它不起作用。]
當我在回圈內顯示推送到陣列的內容時，它似乎可以作業（即我得到了要檢索的值）。然而，當在回圈之外時，陣列是完全空的......
到目前為止，這里的代碼：
const request = async (pk) => {
try {
let singleDetail = [];
const firstResponse = await axios.get(
`http://localhost:8000/${pk}`
);
firstResponse.data.map(async (book, idx) => {
const booking = JSON.stringify(book.id);
const secondResponse = await axios.get(
`http://localhost:8000/${booking}`
);
Object.keys(secondResponse.data).map(async (single) => {
let course = JSON.stringify(secondResponse.data[single].courses);
const thirdResponse = await axios.get(
`http://localhost:8000/${course}`
);
singleDetail.push(
JSON.stringify({
booking: booking,
single: JSON.stringify(secondResponse.data[single]),
course: JSON.stringify(thirdResponse.data),
})
);
});
});
console.log("SINGLEDETAILS " JSON.stringify(singleDetail));
return singleDetail;
} catch (error) {
console.log(error);
}
};
uj5u.com熱心網友回復：
從示例中，問題似乎是您沒有等待地圖中的異步函式。
不等待 的結果firstResponse.data.map(async (book, idx) => {...})，JS 將跳過等待 Promise 解決，從而直接跳轉到return singleDetail;
通過使用await Promise.all(...)，你告訴 JS 在繼續之前等待陣列中的所有 Promise 成功。
嘗試：
const request = async (pk) => {
try {
let singleDetail = [];
const firstResponse = await axios.get(
`http://localhost:8000/${pk}`
);
await Promise.all(firstResponse.data.map(async (book, idx) => {
const booking = JSON.stringify(book.id);
const secondResponse = await axios.get(
`http://localhost:8000/${booking}`
);
await Promise.all(Object.keys(secondResponse.data).map(async (single) => {
let course = JSON.stringify(secondResponse.data[single].courses);
const thirdResponse = await axios.get(
`http://localhost:8000/${course}`
);
singleDetail.push(
JSON.stringify({
booking: booking,
single: JSON.stringify(secondResponse.data[single]),
course: JSON.stringify(thirdResponse.data),
})
);
}));
}));
console.log("SINGLEDETAILS " JSON.stringify(singleDetail));
return singleDetail;
} catch (error) {
console.log(error);
}
};
如果單個 API 請求失敗，try/catch 將捕獲錯誤，并且任何成功的資料請求都將沒有任何用處。
如果希望使用您可以捕獲的任何資料（而回圈中的其他請求失敗），您可以修改代碼以在每個請求之后捕獲錯誤。
如果有很多請求發生，您可能希望使用https://www.npmjs.com/package/p-map之類的東西，而不是await Promise.all(...)限制出站連接的數量。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/480856.html
標籤：javascript 反应 axios