如何利用 async 和 await 简化 Promise 代码-js教程-PHP中文网

async/await 是 javascript 中基于 promise 的异步语法糖，使代码更同步化、可读性更强；async 函数自动返回 promise，await 暂停执行并等待 promise 完成，需在 async 函数内使用，配合 try/catch 可扁平化错误处理。

如何利用 async 和 await 简化 promise 代码

async 和 await 是 JavaScript 中处理异步操作的语法糖，能让基于 Promise 的代码更接近同步写法，大幅提升可读性和可维护性。

async 函数自动返回 Promise

用 async 声明的函数会隐式地将返回值包装成 Promise。即使你 return 一个普通值，它也会被转为 Promise.resolve(value)；如果抛出错误，则等价于 Promise.reject(error)。

直接 return 字符串：async function foo() { return "done"; } → 返回 Promise<string></string>
return Promise：async function bar() { return Promise.resolve(42); } → 返回同一个 Promise
throw 错误：async function baz() { throw new Error("fail"); } → 返回 rejected Promise

await 只能在 async 函数内使用

await 会暂停当前 async 函数的执行，等待右侧的 Promise settle（fulfilled 或 rejected），然后继续。它不是阻塞线程，只是让 JS 引擎“记住”当前位置，等 Promise 完成后再恢复执行。

Gank Interview

Gank Interview是专为笔试和面试设计的AI面试助手。

下载

必须写在 async 函数里，否则报错 Uncaught SyntaxError: await is only valid in async function
await 后面可以是 Promise，也可以是任意值（非 Promise 会立即 resolve）
推荐配合 try/catch 捕获异常，避免 unhandled rejection

替代 .then().catch() 链式调用

传统 Promise 链容易嵌套过深、错误处理分散。用 async/await 可以扁平化流程，集中处理逻辑和错误。

例如：获取用户数据并更新头像

// Promise 风格（易嵌套、难调试）
fetch('/api/user')
  .then(res => res.json())
  .then(user => fetch(`/api/avatar/${user.id}`, { method: 'POST' }))
  .then(res => res.json())
  .catch(err => console.error('出错了', err));

// async/await 风格（线性、易读）
async function updateUserAvatar() {
  try {
    const res = await fetch('/api/user');
    const user = await res.json();
    const avatarRes = await fetch(`/api/avatar/${user.id}`, { method: 'POST' });
    const result = await avatarRes.json();
    return result;
  } catch (err) {
    console.error('出错了', err);
  }
}

并发请求用 Promise.all + await

多个独立异步操作不需要串行时，别一个个 await，改用 Promise.all() 并发发起，再用 await 等待全部完成。

错误处理注意：Promise.all 任一失败即 reject，如需容错可用 Promise.allSettled()
示例：const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);