前端如何判斷多個請求完畢
1. 前端如何判斷多個請求完畢
在前端開發(fā)中，經(jīng)常會遇到需要同時發(fā)起多個異步請求，并在所有請求都完成后再進行下一步操作的情況。
這里有幾個常用的方法來實現(xiàn)這一需求：
1.1. 使用 Promise.all()
Promise.all() 方法接收一個 Promise 對象的數(shù)組作為參數(shù)，當所有的 Promise 對象的狀態(tài)都變?yōu)?resolved 或者只要有一個變?yōu)?rejected 時，Promise.all() 返回的 Promise 實例就會結(jié)束。
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 => {
// 所有請求完成，處理結(jié)果
console.log(results);
})
.catch(error => {
// 如果任何一個請求失敗，則捕獲錯誤
console.error('An error occurred:', error);
});1.2. 使用 Promise.allSettled()
Promise.allSettled() 方法類似于 Promise.all()，但它等待所有的 Promise 都完成（無論成功還是失?。?，并且返回一個包含每個 Promise 的結(jié)果的對象數(shù)組。
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 => {
// 所有請求完成，處理結(jié)果
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 對象的數(shù)組作為參數(shù)，當數(shù)組中的任意一個 Promise 首次變?yōu)?resolved 或 rejected 時，Promise.race() 返回的 Promise 實例就會結(jié)束。
這種方法主要用于檢測最快完成的請求，但如果目的是等待所有請求完成，則不太適用。
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. 使用循環(huán)和遞歸
如果需要更靈活地控制請求的順序或者在請求之間添加額外的邏輯，可以使用循環(huán)和遞歸來依次處理每個請求。
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
在現(xiàn)代瀏覽器中，可以使用 async/await 來編寫更簡潔的代碼。
結(jié)合 Promise.all() 或者循環(huán)和遞歸來處理多個請求。
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. 使用庫和框架提供的工具
許多現(xiàn)代前端庫和框架（如 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();這些方法可以幫助你有效地管理多個異步請求，并在所有請求完成后再進行后續(xù)操作。選擇哪種方法取決于你的具體需求和偏好。
