忙碌了一整天，眼睛紧盯着屏幕，手指在键盘上飞速敲击，好不容易快要完成功能开发，结果接口请求频频超时，页面加载转圈圈，数据迟迟不出现，满心烦躁又无奈！别着急，今晚就为你带来一个超实用的 Vue2 和 Vue3 异步数据加载优化技巧，让你的接口请求快如闪电，从此告别等待焦虑！先考考大家，有没有遇到过同时发起多个接口请求，页面却因为某个慢请求一直卡住，体验极差的情况？答案马上揭晓！

巧用 async/await 与 Promise.all：异步操作的 “加速器”

在 Vue 项目开发中，异步数据加载是再常见不过的场景。无论是获取用户信息、加载商品列表，还是提交表单数据，都离不开与后端接口的交互。但如果异步操作处理不好，就会出现请求混乱、页面卡顿甚至超时等问题。而async/await与Promise.all的组合，就像是给异步操作装上了 “加速器”，让数据加载又快又稳。

在 Vue2 中，我们可以结合axios库，使用async/await来处理异步请求，让代码看起来更像同步代码，简洁易懂。

import axios from 'axios';
export default {
data() {
return {
userInfo: null,
orderList: null
};
},
async created() {
try {
// 异步获取用户信息
const userRes = await axios.get('/api/userInfo');
this.userInfo = userRes.data;
// 异步获取订单列表
const orderRes = await axios.get('/api/orderList');
this.orderList = orderRes.data;
} catch (error) {
console.error('请求出错:', error);
}
}
};

在上述代码中，created生命周期钩子函数被定义为async函数，通过await关键字，我们可以按顺序等待每个接口请求完成，获取数据后再进行下一步操作。这样代码逻辑清晰，避免了传统回调函数带来的 “回调地狱” 问题。

当需要同时发起多个接口请求，并且希望所有请求都完成后再进行处理时，就可以使用Promise.all。

import axios from 'axios';
export default {
data() {
return {
userInfo: null,
orderList: null,
favoriteList: null
};
},
async created() {
try {
// 定义多个请求Promise
const userPromise = axios.get('/api/userInfo');
const orderPromise = axios.get('/api/orderList');
const favoritePromise = axios.get('/api/favoriteList');
// 使用Promise.all等待所有请求完成
const [userRes, orderRes, favoriteRes] = await Promise.all([userPromise, orderPromise, favoritePromise]);
this.userInfo = userRes.data;
this.orderList = orderRes.data;
this.favoriteList = favoriteRes.data;
} catch (error) {
console.error('请求出错:', error);
}
}
};

在 Vue3 中，async/await与Promise.all的使用方式基本相同，结合组合式 API，代码结构更加清晰。

<template>
<div>
<p v-if="userInfo">用户姓名：{{ userInfo.name }}</p>
<ul v-if="orderList">
<li v-for="order in orderList" :key="order.id">{{ order.title }}</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const userInfo = ref(null);
const orderList = ref(null);
onMounted(async () => {
try {
const userPromise = axios.get('/api/userInfo');
const orderPromise = axios.get('/api/orderList');
const [userRes, orderRes] = await Promise.all([userPromise, orderPromise]);
userInfo.value = userRes.data;
orderList.value = orderRes.data;
} catch (error) {
console.error('请求出错:', error);
}
});
</script>

此外，为了防止某个缓慢的接口请求影响整体体验，我们还可以设置请求超时。利用Promise.race，让请求和超时 Promise 进行 “赛跑”，一旦超时 Promise 先完成，就终止请求。

import axios from 'axios';
const fetchDataWithTimeout = async (url, timeout) => {
const controller = new AbortController();
const signal = controller.signal;
const sourcePromise = axios.get(url, { signal });
const timeoutPromise = new Promise((_, reject) => {
setTimeout(() => {
controller.abort(); // 终止请求
reject(new Error('请求超时'));
}, timeout);
});
try {
return await Promise.race([sourcePromise, timeoutPromise]);
} catch (error) {
if (error.name === 'AbortError') {
console.error('请求被取消:', error);
} else {
console.error('请求出错:', error);
}
throw error;
}
};

问题解答

前面提到的 “同时发起多个接口请求，页面却因为某个慢请求一直卡住”，通过Promise.all可以同时发起多个请求，并行获取数据，减少整体等待时间。而利用Promise.race设置请求超时，则能避免因个别缓慢请求导致页面长时间无响应，有效提升用户体验。

在异步请求处理中，你更倾向分开请求还是合并请求？

分开请求可以更灵活地控制每个接口，出错时便于排查，但多次请求会增加服务器压力和网络开销；合并请求通过Promise.all能提高效率，减少请求次数，不过一旦某个请求失败，可能影响整体数据获取。在实际项目开发中，你更常用哪种方式？快来评论区分享你的经验和看法，一起探讨最佳实践！

今天的分享就到这儿啦！希望这个异步数据加载优化技巧，能像一阵清风，吹散你一天的烦躁～带着新技能，好好享受夜晚的悠闲时光吧！觉得有用的话，别忘了点赞、关注，每天晚上都有这样实用又解压的干货分享，咱们明天不见不散！