详细分析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 = false
  uploadRef.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 = true
  await Promise.all([getSaleSummary(), getPurchaseSummary()])
  loading.value = false
})