async/await异步编程中常见问题有哪些？

async与await：异步编程的“语法糖”

在JavaScript的发展历程中，异步编程始终是核心话题，从最初的回调函数（Callback）到Promise的引入，再到async/await的普及，每一次演进都旨在解决“回调地狱”（Callback Hell）问题，让异步代码更易读、易维护，async/await本质上是Promise的语法糖，它允许开发者以同步风格的代码编写异步逻辑，无需处理复杂的链式调用，极大提升了代码的可读性和调试效率。

回调函数曾因嵌套过深导致代码难以维护，Promise虽然通过.then()和.catch()链式调用解决了嵌套问题，但长链式的Promise代码仍然不够直观，而async/await的出现，将异步操作“伪装”成同步代码，通过await关键字暂停函数执行，等待异步操作完成后再继续，同时通过try-catch捕获异常，实现了与同步代码一致的错误处理体验，这种“线性”的代码结构，让异步逻辑仿佛变成了同步执行，显著降低了理解成本。

语法解析：从声明到等待

async函数：返回Promise的“异步容器”

async关键字用于声明一个异步函数，它可以加在任何函数声明前，包括函数表达式、箭头函数和类方法，被async修饰的函数，无论其内部返回值是普通值还是Promise对象，最终都会被自动包装成一个Promise对象。

async function foo() { return "Hello, async!"; }  
foo().then(console.log); // 输出: Hello, async!  

上述代码中，foo()函数返回的字符串被自动包装为Promise.resolve("Hello, async!")，因此可以通过.then()获取结果，如果函数内部抛出异常，则返回一个rejected状态的Promise，异常信息可通过.catch()或try-catch捕获。

await表达式：暂停执行的“等待指令”

await关键字只能在async函数内部使用，它的作用是暂停当前函数的执行，等待右侧的Promise对象状态变为fulfilled或rejected，然后恢复执行并返回Promise的结果值（如果是fulfilled）或抛出异常（如果是rejected）。

• 等待Promise成功：若await后的Promise正常解决，则返回解决值；
• 等待Promise失败：若Promise被拒绝，await会抛出异常，需通过try-catch捕获；
• 非Promise值：若await后跟非Promise值（如普通变量、数字、字符串等），会直接返回该值，相当于await Promise.resolve(该值)。

async function fetchData() {  
  const data = await fetch("https://api.example.com/data"); // 等待fetch请求完成  
  return data.json(); // 返回解析后的JSON数据  
}  

这里，await fetch(...)会暂停函数执行，直到网络请求返回响应，然后继续执行data.json()。

错误处理：同步风格的异常捕获

在Promise中，错误处理通常通过.catch()方法实现，但若存在多个异步操作，错误处理逻辑可能分散在链式调用的各个层级，async/await通过try-catch结构，实现了与同步代码一致的错误处理方式，让异常捕获更加集中和直观。

使用Promise处理错误：

fetch("https://api.example.com/data")  
  .then(response => response.json())  
  .then(data => console.log(data))  
  .catch(error => console.error("请求失败:", error));  

改用async/await后：

async function getData() {  
  try {  
    const response = await fetch("https://api.example.com/data");  
    const data = await response.json();  
    console.log(data);  
  } catch (error) {  
    console.error("请求失败:", error);  
  }  
}  

通过try-catch，所有await可能抛出的异常（如网络错误、JSON解析错误）都会被统一捕获，代码逻辑更清晰，也便于调试。

高级特性：解锁异步编程的更多可能

顺序执行与并行执行

await会阻塞当前async函数的执行，因此多个await默认按顺序执行，若需要并行执行异步操作（避免等待时间累加），可结合Promise.all()实现：

async function fetchParallel() {  
  const [data1, data2] = await Promise.all([  
    fetch("https://api1.example.com/data").then(res => res.json()),  
    fetch("https://api2.example.com/data").then(res => res.json())  
  ]);  
  return { data1, data2 };  
}  

这里，Promise.all()同时发起两个请求，等待所有请求完成后统一返回结果，比顺序执行效率更高。

await与循环的结合

在循环中使用await时，需注意其执行顺序，以下代码会顺序执行多次请求：

async function fetchSequential(urls) {  
  const results = [];  
  for (const url of urls) {  
    const data = await fetch(url).then(res => res.json());  
    results.push(data);  
  }  
  return results;  
}  

若希望循环内每次请求并行执行，可将循环放入Promise.all()：

async function fetchParallelInLoop(urls) {  
  const promises = urls.map(url => fetch(url).then(res => res.json()));  
  return await Promise.all(promises);  
}  

async函数的返回值与Promise链

async函数的返回值会被包装为Promise，因此可以直接通过.then()或await调用。

async function foo() { return "Result"; }  
foo().then(res => console.log(res)); // 输出: Result  
async function bar() {  
  const result = await foo();  
  console.log(result); // 输出: Result  
}  

应用场景：从浏览器到服务端的实践

async/await凭借其简洁性，已成为现代异步编程的主流选择，广泛应用于以下场景：

前端HTTP请求

在浏览器中，使用fetch或axios发送HTTP请求时，async/await能清晰处理请求和响应逻辑：

async function loadUser(userId) {  
  try {  
    const response = await axios.get(`/api/users/${userId}`);  
    return response.data;  
  } catch (error) {  
    console.error("加载用户失败:", error);  
    throw error;  
  }  
}  

服务端数据库操作

在Node.js服务端（如Express框架中），async/await常用于处理数据库异步操作（如MongoDB、MySQL查询），避免回调嵌套：

app.get("/posts", async (req, res) => {  
  try {  
    const posts = await Post.find(); // 假设Post是Mongoose模型  
    res.json(posts);  
  } catch (error) {  
    res.status(500).json({ error: "获取文章失败" });  
  }  
});  

文件与流操作

在Node.js中，文件读写（如fs.promises模块）也常结合async/await使用：

async function readFile(filePath) {  
  try {  
    const content = await fs.promises.readFile(filePath, "utf-8");  
    return content;  
  } catch (error) {  
    console.error("读取文件失败:", error);  
    throw error;  
  }  
}  

FAQs

Q1: async函数中不使用await，函数会同步执行吗？
A: 不会，async函数本身总是返回一个Promise，且函数内部的代码会“立即”执行（同步执行），但遇到await时会暂停当前函数的执行，等待Promise解决，若函数内没有await，则函数会同步执行完毕，并返回一个Promise对象（Promise状态为fulfilled，值为函数返回值）。

async function foo() {  
  console.log("同步执行部分");  
  return "async result";  
}  
foo(); // 输出: 同步执行部分  
foo().then(console.log); // 输出: async result  

Q2: await后面跟非Promise值（如null、undefined或普通对象）会发生什么？
A: await会自动将非Promise值包装为Promise.resolve(值)，然后等待其解决，await后的非Promise值会直接返回该值，不会影响代码执行。

async function test() {  
  const result1 = await null; // 等价于 await Promise.resolve(null)，返回null  
  const result2 = await 123;  // 等价于 await Promise.resolve(123)，返回123  
  const result3 = await { key: "value" }; // 返回{ key: "value" }  
  return [result1, result2, result3];  
}  
test().then(console.log); // 输出: [null, 123, { key: "value" }]