Vue多请求并行处理的实战指南

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 对应 request1 的结果
          this.data1 = responses.data;
          this.data2 = responses.data;
        })
        .catch(error => {
          console.error('请求失败:', error); // 错误处理
        });
    }
  },
  mounted() {
    this.fetchData(); // 组件挂载时调用
  }
};

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('请求错误:', error);
});

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('错误:', err.message);
  }
}

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