vue3 async await调用生命周期

### Vue 3 中使用 `async` 和 `await` 调用生命周期钩子 在 Vue 3 中，通过 Composition API 可以更灵活地利用 `async` 和 `await` 来处理异步操作。这不仅简化了代码结构，也提高了可读性和维护性。 #### 定义异步生命周期钩子 当希望在一个生命周期钩子里执行异步操作时，可以直接将这个钩子定义为一个 `async` 函数。例如，在组件挂载 (`onMounted`) 后发起网络请求： ```javascript import { onMounted } from 'vue'; import axios from 'axios'; export default { setup() { onMounted(async () => { try { const response = await axios.get('https://api.example.com/data'); console.log(response.data); } catch (error) { console.error("Failed to fetch data", error); } }); return {}; }, }; ``` 此段代码展示了如何安全地进行数据获取并处理可能发生的错误[^4]。 #### 并发请求 如果需要在同一时刻发出多个独立的 HTTP 请求，则可以通过 `Promise.all()` 结合 `await` 实现高效的并发加载： ```javascript import { onMounted } from 'vue'; import axios from 'axios'; export default { setup() { onMounted(async () => { try { const [response1, response2] = await Promise.all([ axios.get('https://api.example.com/data1'), axios.get('https://api.example.com/data2') ]); console.log([response1.data, response2.data]); } catch (error) { console.error("One or more requests failed.", error); } }); return {}; }, }; ``` 这种方法能够显著减少总的等待时间，因为两个请求几乎是同时完成的。 #### 错误重试机制 对于那些可能会失败的关键请求，还可以加入简单的重试逻辑来增强应用健壮性： ```javascript function retry(fn, retriesLeft = 5, interval = 1000) { return new Promise((resolve, reject) => { fn().then(resolve).catch(error => { setTimeout(() => { if (retriesLeft === 1) { // 如果尝试次数耗尽则拒绝当前承诺 return reject(error); } // 继续下一次尝试 retry(fn, retriesLeft - 1, interval).then(resolve).catch(reject); }, interval); }); }); } // 使用方法如下： retry(() => axios.get('https://api.example.com/unstable-endpoint')) .then(data => console.log(`Success after ${data.retries} attempts.`)) .catch(err => console.error('All retries have been exhausted.', err)); ``` 这段辅助函数允许指定最大重试次数以及每次重试之间的间隔时间，从而更好地应对临时性的服务端问题。