web开发必备技术知识笔记-async和await

对于异步处理在前端开发中出现频率非常的高，恨不得每个页面都至少会有一个异步处理的操作。最常见的还是通过后端API异步获取数据。对于异步处理我都是使用promise处理，虽然一直知道，在JavaScript编程中，async和await是两个用于处理异步操作的关键字，它们允许我们以更同步的方式编写异步代码，但是new Promise()更能让我容易理解并使用。但是有些情境下不得不让我使用async和await，将异步操作以同步的方式处理数据，以下是对async和await这两个关键字的详细解释：

1. async

• 定义：async是ES7（ECMAScript 2017）中引入的一个关键字，用于声明一个函数是异步的。

• 功能：

• 创建一个返回Promise对象的函数。

• 使得异步代码看起来像同步代码，从而提高了代码的可读性和可维护性。

• 返回值：async函数总是返回一个Promise对象。如果函数返回一个非Promise值，那么这个值会被隐式地包装在一个解析为该值的Promise对象中。

• 使用方式：在函数声明或函数表达式前加上async关键字。

示例：

async function fetchData() {  
  return "Some data";  
}  
  
const result = fetchData(); // result 是一个 Promise 对象  
result.then(data => console.log(data)); // 输出 "Some data"

2. await

• 定义：await是另一个ES7中引入的关键字，只能在async函数内部使用。它用于等待一个Promise，并返回其解决的值。

• 功能：

• 暂停async函数的执行，直到Promise解决或拒绝。

• 返回Promise解决的值，或抛出Promise拒绝的异常。

• 使用方式：在async函数内部，可以在任何返回Promise的对象前使用await关键字。

示例：

async function fetchAndProcessData() {  
  try {  
    const data = await fetchData(); // 等待 fetchData() 返回的 Promise 解决  
    console.log(data); // 输出 "Some data"  
    // 在这里可以进一步处理 data  
  } catch (error) {  
    console.error("Error fetching data:", error);  
  }  
}  
  
fetchAndProcessData();

总结

• async和await一起使用，可以使异步代码更易于理解和维护。
• async函数总是返回一个Promise对象。这里非常重要，虽然async和await可以像同步方式一样操作数据，但是async函数返回的不会是处理后的数据（return test;），始终都只会是一个Promise对象。
• await只能在async函数内部使用，用于等待Promise并返回其解决的值或抛出异常。
• 通过使用try/catch结构，可以优雅地处理Promise的拒绝。