前言

async/await在JavaScript中是一种处理异步操作的方法，是基于Promise对象实现的，是Promise的语法糖。它允许我们以同步的方式编写异步代码，使得代码更加简洁 易读和维护，是JavaScript中用于处理异步操作的关键字。async和await提供了对异步操作的错误处理机制，可通过try...catch语句来捕获异步函数中的异常。

一. 具体使用

这里分享几个具体的使用实例，请看

实例1：基本使用

// 定义一个返回 Promise 的模拟异步函数  
function fetchData() {  
    return new Promise((resolve, reject) => {  
        setTimeout(() => {  
            resolve('数据已获取!');  
        }, 1000);  
    });  
}  
  
// 使用 async/await 处理异步操作  
async function getData() {  
    try {  
        const result = await fetchData(); // 在这里等待，直到 fetchData() 完成  
        console.log(result); // 输出: 数据已获取!  
    } catch (error) {  
        console.error('获取数据时出错:', error);  
    }  
}  
  
getData(); // 调用函数

这段代码定义了一个模拟的异步函数 fetchData，它返回一个 Promise。然后使用 async/await 来处理这个异步操作，并在 try...catch 块中捕获可能的错误。最后，调用 getData 函数来执行整个流程。

---

实例2：错误处理

// 定义一个返回错误信息的异步函数  
function fetchRiskyData() {  
    return new Promise((resolve, reject) => {  
        setTimeout(() => {  
            reject('数据获取失败!');  
        }, 1000);  
    });  
}  
  
async function getRiskyData() {  
    try {  
        // 这里不会执行，因为上面的 Promise 被拒绝了
        const errorResult= await fetchRiskyData();  
        console.log(errorResult);   
    } catch (error) {  
        console.error('获取风险数据时出错:', error); 
        // 输出: 获取风险数据时出错: 数据获取失败!  
    }  
}  
  
getRiskyData(); // 调用函数

这段代码定义了一个返回错误信息的异步函数 fetchRiskyData，它返回一个被拒绝的 Promise。然后使用 async/await 来处理这个异步操作，并在 try...catch 块中捕获并处理错误。最后，调用 getRiskyData 函数来执行整个流程。

---

实例3：循环使用

在循环中使用，请看

async function processItems(items) {  
  for (const item of items) {  
      try {  
          // 调用 processItem异步函数  
          const processedItem = await processItem(item); 
          console.log('处理完成:', processedItem);  
          // 输出
          //处理完成: 处理后的项目: 1
          //处理完成: 处理后的项目: 2
          //处理完成: 处理后的项目: 3
      } catch (error) {  
          console.error('处理项目时出错:', error);  
      }  
  }  
}  

// 假设的异步函数，用于处理单个项目  
async function processItem(item) {  
  // 这里可以是一些异步操作，比如网络请求、读取文件等  
  // 为了演示，我们使用一个简单的返回Promise的模拟函数  
  return new Promise((resolve) => {  
      setTimeout(() => {  
          resolve(`处理后的项目: ${item}`);  
      }, 1000);  
  });  
}  

// 调用函数（假设 items 是一个数组）  
processItems([1, 2, 3]);

这段代码定义了两个异步函数 processItems 和 processItem。processItems 用于处理一个项目数组，而 processItem 用于处理单个项目。processItems 函数使用 for...of 循环遍历数组中的每个项目，并使用 await 等待 processItem 的结果。如果在处理过程中发生错误，会捕获并记录错误信息。

---

 实例4：获取数据

① 获取多个

并行获取多个数据，请看

// 定义一个返回 Promise 的模拟异步函数  
function fetchData() {  
    return new Promise((resolve, reject) => {  
        setTimeout(() => {  
            resolve('数据已获取!');  
        }, 1000);  
    });  
}  
  
// 定义一个返回 Promise 的模拟异步函数2  
function fetchOtherData() {  
    return new Promise((resolve, reject) => {  
        setTimeout(() => {  
            resolve('其他数据已获取!');  
        }, 1500);  
    });  
}  
  
async function getMultipleData() {  
    try {  
        // 使用 Promise.all 并行获取所有数据  
        const result = await Promise.all([fetchData(), fetchOtherData()]);
        console.log(result); // 输出: [ '数据已获取!', '其他数据已获取!' ] 
    } catch (error) {  
        console.error('获取多个数据时出错:', error);  
    }  
}  
  
getMultipleData(); // 调用函数

这段代码定义了两个返回 Promise 的模拟异步函数 fetchData 和 fetchOtherData。然后使用 async/await 和 Promise.all 来并行获取这两个异步操作的结果，并在 try...catch 块中捕获可能的错误。最后，调用 getMultipleData 函数来执行整个流程。

② 项目数据

在 Vue2 中使用 async/await 和 try...catch 来获取数据，并处理错误，请看

import { getInfoList } from "@/api/test.js";

async callInfoList() {
  this.loading = true;

  try {

    // 调用异步函数并等待其完成
    const res = await getInfoList();
    // 在这里处理返回的数据
    console.log(res);

    // 数据处理逻辑...
    if (res?.code && res?.code === 200) {
       // console.log(res.data,2)
       const data = res.data;
       this.testList = data.map((item, i) => ({
            label: item.name,
            value: i,
       }))
       // console.log(this.testList )
     } else {
             // 业务逻辑失败
             console.error("Business logic failed:", res.code);
     }

    
  } catch (error) {

    // 捕获任何错误，并进行相应的处理
    console.error("Request error:", error);

  } finally {

    // 无论请求成功还是失败，都重置加载状态
    this.loading = false;

  }

}

这里的 try...catch 和 Promise 都支持 finally 操作，其中 Promise 的 finally 用于在 Promise 结束时（无论成功还是失败）执行清理工作，而 try...catch 的 finally 块则用于在同步或异步代码块结束后执行清理操作，确保资源释放和状态重置。

---

二. 更多操作

在 Vue3 中使用 async/await 和 try...catch 来获取数据，并处理错误，请看

Vue3 请求数据https://blog.csdn.net/weixin_65793170/article/details/142054909?spm=1001.2014.3001.5502

创作不易，感觉有用，就一键三连，感谢(●'◡'●)