快捷導(dǎo)航

Vue多請(qǐng)求并行處理的實(shí)戰(zhàn)指南

更新時(shí)間：2025年08月01日 09:03:23 作者：代碼的余溫

在Vue中同時(shí)發(fā)送多個(gè)請(qǐng)求主要通過(guò)并行處理機(jī)制實(shí)現(xiàn),常用方法包括 Promise.all,axios.all和 async/await,下面小編就來(lái)和大家詳細(xì)介紹一下詳細(xì)操作吧

一、使用 Promise.all 并行發(fā)送請(qǐng)求

Promise.all 接收一個(gè) Promise 數(shù)組，在所有請(qǐng)求完成后返回結(jié)果數(shù)組。如果任一請(qǐng)求失敗，整個(gè) Promise.all 會(huì)立即拒絕。

代碼示例：

import axios from 'axios';

export default {
  methods: {
    fetchData() {
      const request1 = axios.get('/api/data1');
      const request2 = axios.get('/api/data2');
      
      Promise.all([request1, request2])
        .then(responses => {
          // responses 對(duì)應(yīng) request1 的結(jié)果
          this.data1 = responses.data;
          this.data2 = responses.data;
        })
        .catch(error => {
          console.error('請(qǐng)求失敗:', error); // 錯(cuò)誤處理
        });
    }
  },
  mounted() {
    this.fetchData(); // 組件掛載時(shí)調(diào)用
  }
};

優(yōu)點(diǎn)：代碼簡(jiǎn)潔，并行執(zhí)行效率高。
缺點(diǎn)：任一失敗會(huì)導(dǎo)致整體失敗，需捕獲錯(cuò)誤以保證部分?jǐn)?shù)據(jù)顯示。

二、使用 axios.all 簡(jiǎn)化并行請(qǐng)求

axios.all 是 Axios 提供的便捷方法，行為類似 Promise.all，但支持 axios.spread 解構(gòu)響應(yīng)。

代碼示例：

axios.all([
  axios.get('/api/user'),
  axios.get('/api/posts')
]).then(
  axios.spread((userRes, postsRes) => {
    console.log(userRes.data); 
    console.log(postsRes.data);
  })
).catch(error => {
  console.error('請(qǐng)求錯(cuò)誤:', error);
});

適用場(chǎng)景：需解構(gòu)響應(yīng)對(duì)象時(shí)更直觀，減少數(shù)組索引操作。
注意：必須先安裝 Axios 庫(kù)（npm install axios）。

三、使用 async/await 管理請(qǐng)求

async/await 語(yǔ)法可使異步代碼更易讀，支持并行或串行處理。

并行示例（結(jié)合 Promise.all）：

async fetchMultipleData() {
  try {
    const [res1, res2] = await Promise.all([
      axios.get('/api/data1'),
      axios.get('/api/data2')
    ]);
    this.data1 = res1.data;
    this.data2 = res2.data;
  } catch (err) {
    console.error('錯(cuò)誤:', err.message);
  }
}

串行示例：

依次執(zhí)行請(qǐng)求，但效率較低：

async sequentialRequests() {
  const res1 = await axios.get('/api/data1');
  const res2 = await axios.get('/api/data2'); // 等待 res1 完成
  // 處理結(jié)果
}