前端如何判斷多個請求完畢
作者：前端老兵
Promise.all() 方法接收一個 Promise 對象的數組作為參數，當所有的 Promise 對象的狀態都變為 resolved 或者只要有一個變為 rejected 時，Promise.all() 返回的 Promise 實例就會結束。
1. 前端如何判斷多個請求完畢
在前端開發中，經常會遇到需要同時發起多個異步請求，并在所有請求都完成后再進行下一步操作的情況。
這里有幾個常用的方法來實現這一需求：
1.1. 使用 Promise.all()
Promise.all() 方法接收一個 Promise 對象的數組作為參數，當所有的 Promise 對象的狀態都變為 resolved 或者只要有一個變為 rejected 時，Promise.all() 返回的 Promise 實例就會結束。
1.1.1. 示例代碼
const request1 = fetch('https://api.example.com/data1');
const request2 = fetch('https://api.example.com/data2');
const request3 = fetch('https://api.example.com/data3');
Promise.all([request1, request2, request3])
.then(responses => Promise.all(responses.map(r => r.json())))
.then(results => {
// 所有請求完成，處理結果
console.log(results);
})
.catch(error => {
// 如果任何一個請求失敗，則捕獲錯誤
console.error('An error occurred:', error);
});1.2. 使用 Promise.allSettled()
Promise.allSettled() 方法類似于 Promise.all()，但它等待所有的 Promise 都完成（無論成功還是失敗），并且返回一個包含每個 Promise 的結果的對象數組。
1.2.1. 示例代碼
const request1 = fetch('https://api.example.com/data1');
const request2 = fetch('https://api.example.com/data2');
const request3 = fetch('https://api.example.com/data3');
Promise.allSettled([request1, request2, request3])
.then(results => {
// 所有請求完成，處理結果
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('Success:', result.value);
} else {
console.error('Failed:', result.reason);
}
});
});1.3. 使用 Promise.race()
Promise.race() 方法接收一個 Promise 對象的數組作為參數，當數組中的任意一個 Promise 首次變為 resolved 或 rejected 時，Promise.race() 返回的 Promise 實例就會結束。
這種方法主要用于檢測最快完成的請求，但如果目的是等待所有請求完成，則不太適用。
1.3.1. 示例代碼
const request1 = fetch('https://api.example.com/data1');
const request2 = fetch('https://api.example.com/data2');
const request3 = fetch('https://api.example.com/data3');
Promise.race([request1, request2, request3])
.then(response => {
// 最快完成的請求
response.json().then(data => console.log('Fastest request data:', data));
})
.catch(error => {
// 如果任何一個請求失敗，則捕獲錯誤
console.error('An error occurred:', error);
});1.4. 使用循環和遞歸
如果需要更靈活地控制請求的順序或者在請求之間添加額外的邏輯，可以使用循環和遞歸來依次處理每個請求。
1.4.1. 示例代碼
const requests = [
fetch('https://api.example.com/data1'),
fetch('https://api.example.com/data2'),
fetch('https://api.example.com/data3')
];
let results = [];
function processNextRequest(index) {
if (index >= requests.length) {
console.log('All requests completed:', results);
return;
}
requests[index]
.then(response => response.json())
.then(data => {
results.push(data);
processNextRequest(index + 1);
})
.catch(error => {
console.error('Error processing request:', error);
});
}
processNextRequest(0);1.5. 使用 async/await
在現代瀏覽器中，可以使用 async/await 來編寫更簡潔的代碼。
結合 Promise.all() 或者循環和遞歸來處理多個請求。
1.5.1. 示例代碼
async function fetchAllData() {
try {
const [response1, response2, response3] = await Promise.all([
fetch('https://api.example.com/data1'),
fetch('https://api.example.com/data2'),
fetch('https://api.example.com/data3')
]);
const [data1, data2, data3] = await Promise.all([
response1.json(),
response2.json(),
response3.json()
]);
console.log('All data:', data1, data2, data3);
} catch (error) {
console.error('An error occurred:', error);
}
}
fetchAllData();1.6. 使用庫和框架提供的工具
許多現代前端庫和框架（如 Axios、React Query、VueUse 等）提供了更高級的功能來處理多個請求，例如自動重試、緩存、取消等。
1.6.1. 示例代碼 (使用 Axios)
import axios from 'axios';
async function fetchAllData() {
try {
const [data1, data2, data3] = await axios.all([
axios.get('https://api.example.com/data1'),
axios.get('https://api.example.com/data2'),
axios.get('https://api.example.com/data3')
]);
console.log('All data:', data1.data, data2.data, data3.data);
} catch (error) {
console.error('An error occurred:', error);
}
}
fetchAllData();這些方法可以幫助你有效地管理多個異步請求，并在所有請求完成后再進行后續操作。選擇哪種方法取決于你的具體需求和偏好。
責任編輯：武曉燕
來源：
前端愛好者
