详细分析async/await的基本知识以及用法（附Demo）

本文主要是介绍详细分析async/await的基本知识以及用法（附Demo），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

原先在小程序的时候用过这个用法，知识点差不过，推荐阅读：详细分析Js中的Promise.all基本知识（附Demo）

以下文章针对Vue3知识，但该知识和JS差不多用法

1. 基本知识

async 函数是指使用 async 关键字声明的函数,当函数被声明为 async 时，会返回一个 Promise 对象，无论该函数内部是否有异步操作

async function fetchData() {// 异步操作return await someAsyncOperation();
}

await 只能在 async 函数内部使用，它可以暂停 async 函数的执行，等待 Promise 对象的解决

async function fetchData() {let result = await someAsyncOperation();console.log(result);
}

主要的功能有如下：

简化异步代码：使得异步代码的编写更加直观和类似于同步代码，避免回调地狱
提高可读性：代码结构更清晰，易于理解和维护
处理异步错误：通过 try/catch 结构来捕获 await 中抛出的异常

2. Demo

2.1 单异步

async function fetchData() {try {let result = await axios.get('https://api.example.com/data');return result.data;} catch (error) {console.error('Error fetching data:', error);return null;}
}

2.2 多异步

async function fetchUserDataAndPosts(userId) {try {let userData = await axios.get(`https://api.example.com/user/${userId}`);let userPosts = await axios.get(`https://api.example.com/user/${userId}/posts`);return { userData: userData.data, userPosts: userPosts.data };} catch (error) {console.error('Error fetching user data or posts:', error);return null;}
}

2.3 配合钩子

export default {async created() {try {this.userData = await this.fetchUserData();} catch (error) {console.error('Error fetching user data:', error);}},methods: {async fetchUserData() {let userId = this.$route.params.userId;let response = await axios.get(`https://api.example.com/user/${userId}`);return response.data;}}
}

2.4 差异

上述都是采用Promise对象，如果非采用非Promise对象，具体的延迟操作如下：使用setTimeout来模拟一个非Promise的异步操作

export default {async created() {try {// 使用setTimeout模拟一个非Promise的异步操作let result = await new Promise(resolve => {setTimeout(() => {resolve('Delayed operation completed');}, 2000);});// 获取到延迟操作的结果console.log(result);} catch (error) {console.error('Error:', error);}}
}

3. 实战

实战截图如下：
在这里插入图片描述

对应抽取的Demo如下：

对应的单个异步如下：

resetForm函数是一个异步函数，使用了async/await
目的是重置表单，其中的异步操作可能是清除上传文件或重置表单的状态

const resetForm = async (): Promise<void> => {// 重置上传状态和文件formLoading.value = falseuploadRef.value?.clearFiles()
}

多异步如下：

两个异步函数getSaleSummary和getPurchaseSummary，分别用于获取销售统计和采购统计
使用Promise.all来同时等待这两个异步函数的结果

const getSaleSummary = async () => {saleSummary.value = await SaleStatisticsApi.getSaleSummary()saleTimeSummaryList.value = await SaleStatisticsApi.getSaleTimeSummary()
}const getPurchaseSummary = async () => {purchaseSummary.value = await PurchaseStatisticsApi.getPurchaseSummary()purchaseTimeSummaryList.value = await PurchaseStatisticsApi.getPurchaseTimeSummary()
}onMounted(async () => {loading.value = trueawait Promise.all([getSaleSummary(), getPurchaseSummary()])loading.value = false
})