async/await

最新推荐文章于 2025-03-30 11:56:56 发布

2301_81708010

最新推荐文章于 2025-03-30 11:56:56 发布

阅读量1.5k

点赞数 21

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/2301_81708010/article/details/145648433

版权

async/await 是 JavaScript 中用于简化异步代码的语法糖，基于 Promise 实现。它让异步代码的写法更像同步代码，提高了代码的可读性和可维护性。

1. `async` 函数

async 关键字用于声明一个异步函数。
异步函数始终返回一个 Promise 对象：
- 如果函数返回值是非 Promise 对象，会自动包装为 Promise.resolve(返回值)。
- 如果函数抛出错误，会返回 Promise.reject(错误)。

示例

javascript

复制

async function foo() {
  return 'Hello, async!';
}

foo().then(result => console.log(result)); // 输出: Hello, async!

2. `await` 表达式

await 关键字用于等待一个 Promise 对象的状态变为 fulfilled（成功）或 rejected（失败）。
await 只能在 async 函数中使用。
如果 await 的 Promise 成功，返回其 resolve 的值。
如果 await 的 Promise 失败，抛出错误（可以通过 try/catch 捕获）。

示例

javascript

复制

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

3. `async/await` 的优势

代码简洁：避免了 Promise 的链式调用（.then 和 .catch），代码更易读。
错误处理：可以使用 try/catch 捕获异步错误，类似于同步代码的错误处理。
逻辑清晰：异步代码的流程更直观，便于理解和维护。

4. `async/await` 的使用场景

4.1 处理异步操作

例如：网络请求、文件读写、定时器等。

javascript

复制

async function getUserData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const user = await response.json();
  return user;
}

4.2 顺序执行异步任务

使用 await 可以确保异步任务按顺序执行。

javascript

复制

async function task1() {
  return new Promise(resolve => setTimeout(() => resolve('Task 1'), 1000));
}

async function task2() {
  return new Promise(resolve => setTimeout(() => resolve('Task 2'), 500));
}

async function runTasks() {
  const result1 = await task1();
  const result2 = await task2();
  console.log(result1, result2); // 输出: Task 1 Task 2
}

runTasks();

4.3 并行执行异步任务

使用 Promise.all 可以并行执行多个异步任务。

javascript

复制

async function runTasksInParallel() {
  const [result1, result2] = await Promise.all([task1(), task2()]);
  console.log(result1, result2); // 输出: Task 1 Task 2
}

runTasksInParallel();

5. 错误处理

使用 try/catch 捕获 await 表达式的错误。

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

6. `async/await` 的注意事项

只能在 async 函数中使用 await：如果在普通函数中使用 await，会抛出语法错误。
性能问题：过度使用 await 可能导致性能问题，尤其是在循环中。可以使用 Promise.all 优化。
兼容性：async/await 是 ES2017 的特性，现代浏览器和 Node.js 环境都支持，但在旧环境中可能需要使用 Babel 转译。

7. `async/await` 与 Promise 的关系

async/await 是基于 Promise 的语法糖，本质上仍然是 Promise。
async 函数返回一个 Promise 对象。
await 后面可以跟任何 Promise 对象。

示例：`async/await` 与 Promise 的等价转换

javascript

复制

// 使用 Promise
function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => data)
    .catch(error => console.error(error));
}

// 使用 async/await
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);
  }
}