简述ES6 async函数的？

八股文_ES67 0 29

参考回答

ES6 中的 async 函数 是一种用来简化异步操作的语法糖，它本质上是基于 Promise 的封装，允许我们以同步代码的写法来处理异步任务，从而提高代码的可读性和可维护性。

主要特点：
1. 自动返回 Promise：async 函数会返回一个 Promise 对象。
2. 内置异步等待：使用 await 可以暂停代码的执行，直到异步操作完成。

示例：

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

fetchData().then(data => console.log(data)).catch(error => console.error(error));

在这个例子中，await 暂停了代码执行，直到 fetch 操作完成，避免了传统的回调地狱。

详细讲解与拓展

1. 语法

async 关键字：用于定义异步函数。
await 关键字：用于等待一个异步操作完成（只能在 async 函数中使用）。

基本形式：

async function myFunction() {
  const result = await someAsyncOperation();
  console.log(result);
}

2. `async` 函数的返回值

async 函数默认返回一个 Promise 对象。
如果函数内部返回的是普通值，它会被自动包装成一个 Promise。
如果函数内部抛出错误，返回的 Promise 会变为 Rejected 状态。

示例：

async function normalReturn() {
  return 42; // 自动包装成 Promise.resolve(42)
}

async function errorThrow() {
  throw new Error('Something went wrong'); // 返回 Promise.reject(Error)
}

normalReturn().then(console.log); // 输出: 42
errorThrow().catch(console.error); // 输出: Error: Something went wrong

3. `await` 的作用

await 会暂停代码的执行，直到 Promise 状态变为 Resolved，然后返回结果。
如果 Promise 被 Rejected，await 会抛出错误，需要用 try...catch 捕获。

示例：

async function example() {
  try {
    const data = await fetch('https://api.example.com/data').then(res => res.json());
    console.log(data);
  } catch (error) {
    console.error('Fetch failed:', error);
  }
}

4. 串行与并行处理

串行执行：
使用 await 可以按照顺序执行多个异步任务。

async function serialExecution() {
const result1 = await fetch('https://api.example.com/data1');
const result2 = await fetch('https://api.example.com/data2');
console.log(result1, result2);
}

并行执行：
如果多个异步任务互不依赖，可以使用 Promise.all 提高性能：

async function parallelExecution() {
const [result1, result2] = await Promise.all([
  fetch('https://api.example.com/data1'),
  fetch('https://api.example.com/data2')
]);
console.log(result1, result2);
}

5. `async` 函数的应用场景

异步数据获取：

async function fetchData() {
 const response = await fetch('https://api.example.com/data');
 const data = await response.json();
 return data;
}
fetchData().then(console.log);

替代回调地狱：
传统的嵌套回调：

fetch('https://api.example.com/data1', response1 => {
 fetch('https://api.example.com/data2', response2 => {
   console.log(response1, response2);
 });
});

使用 async 优化：

async function fetchData() {
 const response1 = await fetch('https://api.example.com/data1');
 const response2 = await fetch('https://api.example.com/data2');
 console.log(response1, response2);
}

异步流程控制：
根据任务间的依赖关系，按需串行或并行执行。

6. 错误处理

async/await 错误可以通过两种方式捕获：
– 使用 try...catch：

“`javascript
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', error);
}
}
“`
– 使用 `catch` 方法：
“`javascript
fetchData().catch(error => console.error(‘Error:’, error));
“`

7. 与 Generator 的区别

async/await 是 Generator 的语法糖，主要区别包括：
– 写法更简洁：async/await 不需要手动管理迭代器。
– 更适合异步编程：async 函数直接返回 Promise，而 Generator 需要配合运行器（如 co 模块）使用。

对比：

// Generator 示例
function* generator() {
  yield fetch('https://api.example.com/data1');
  yield fetch('https://api.example.com/data2');
}

// async/await 示例
async function asyncExample() {
  const data1 = await fetch('https://api.example.com/data1');
  const data2 = await fetch('https://api.example.com/data2');
  console.log(data1, data2);
}

8. 注意事项

await 阻塞的问题：
await 会阻塞当前异步函数的执行，因此在并行任务中需注意性能优化，使用 Promise.all 等方式。
错误处理：
异常处理需要特别注意，尽量在 async 函数中使用 try...catch。

总结

ES6 的 async 函数提供了一种更简洁优雅的方式来处理异步代码。通过 await，可以暂停代码执行，等待异步操作完成后继续，从而避免回调地狱，提高代码的可读性和维护性。熟练掌握 async/await 是现代 JavaScript 异步编程的必备技能。

参考回答

详细讲解与拓展

1. 语法

2. async 函数的返回值

3. await 的作用