前端如何判斷多個請求完畢

作者：前端老兵 2024-08-26 08:47:32

Promise.all() 方法接收一個 Promise 對象的數組作為參數，當所有的 Promise 對象的狀態都變為 resolved 或者只要有一個變為 rejected 時，Promise.all() 返回的 Promise 實例就會結束。

1. 前端如何判斷多個請求完畢

在前端開發中，經常會遇到需要同時發起多個異步請求，并在所有請求都完成后再進行下一步操作的情況。

這里有幾個常用的方法來實現這一需求：

1.1. 使用 Promise.all()

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();

這些方法可以幫助你有效地管理多個異步請求，并在所有請求完成后再進行后續操作。選擇哪種方法取決于你的具體需求和偏好。

責任編輯：武曉燕來源：前端愛好者

前端異步代碼