接口请求总超时？1 个异步优化技巧

大家好，欢迎来到IT知识分享网。

忙碌了一整天，眼睛紧盯着屏幕，手指在键盘上飞速敲击，好不容易快要完成功能开发，结果接口请求频频超时，页面加载转圈圈，数据迟迟不出现，满心烦躁又无奈！别着急，今晚就为你带来一个超实用的 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能提高效率，减少请求次数，不过一旦某个请求失败，可能影响整体数据获取。在实际项目开发中，你更常用哪种方式？快来评论区分享你的经验和看法，一起探讨最佳实践！

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