在 Vue 中同时发送多个请求主要通过并行处理机制实现,常用方法包括 Promise.all、axios.all(基于 Axios 库)和 async/await。以下为详细操作指南和注意事项:
一、使用 Promise.all 并行发送请求
Promise.all 接收一个 Promise 数组,在所有请求完成后返回结果数组。如果任一请求失败,整个 Promise.all 会立即拒绝。
-
代码示例 :
javascriptimport 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.all 是 Axios 提供的便捷方法,行为类似 Promise.all,但支持 axios.spread 解构响应。
-
代码示例 :
javascriptaxios.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); });
-
适用场景:需解构响应对象时更直观,减少数组索引操作。
-
注意:必须先安装 Axios 库(npm install axios)。
三、使用 async/await 管理请求
async/await 语法可使异步代码更易读,支持并行或串行处理。
-
并行示例(结合 Promise.all) :
javascriptasync 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); } }
-
串行示例 :
依次执行请求,但效率较低:javascriptasync sequentialRequests() { const res1 = await axios.get('/api/data1'); const res2 = await axios.get('/api/data2'); // 等待 res1 完成 // 处理结果 }
-
优点:代码结构清晰,适合复杂逻辑。
-
缺点:并行时需结合 Promise.all,否则默认串行。
四、关键注意事项
- 错误处理:必须添加 catch 块或 try-catch,避免单个失败中断所有请求。
- 性能优化:优先选择并行方法(如 Promise.all)提升加载速度。
- 库依赖:Axios 是常用 HTTP 库,提供 all 和 spread 等工具简化操作。
- 替代方案:对于需容忍部分失败场景,可使用 Promise.allSettled。