JavaScript中的async/await（ES8的async/await）

拼搏现实的明天。 2024-04-22 22:28 68阅读 0赞

#### **简介：** ####

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

####  ####

### 这里写几个async/await的常用实例， ###

#### 实例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(); // 调用函数

#### **实例2：并行获取多个数据** ####

// 定义一个返回 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(); // 调用函数

#### **实例3： 错误处理** ####

// 定义一个返回错误信息的异步函数  
    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(); // 调用函数

#### **实例4：在循环中使用** ####

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]);