async/await让异步代码更简洁易读

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《async和await如何简化JavaScript异步操作》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

async函数必定返回一个Promise对象——即使return基本类型也会被Promise.resolve()包装，未return则等价于return undefined，抛错则等价于Promise.reject()。

async 和 await 是 JavaScript 中处理异步操作的语法糖，本质是基于 Promise 的封装。它们不改变异步本质，但让代码写起来像同步一样线性、可读、易调试。

async 函数到底返回什么？

所有加了 async 前缀的函数，**必定返回一个 Promise 对象**——哪怕你 return 42 或 return 'ok'，JS 也会自动用 Promise.resolve() 包一层。

async function foo() {
  return 'hello';
}
console.log(foo()); // Promise {: "hello"}
foo().then(v => console.log(v)); // "hello"

• 没 return？等价于 return undefined → 返回 Promise.resolve(undefined)
• 抛错？等价于 Promise.reject(error)，可被 catch 捕获
• async 不会让函数“变快”，只是统一了返回形态，调用方能安全地链式处理

await 只能等 Promise，但不是所有异步都自带 Promise

await 后面的表达式如果不是 Promise，它就直接取值；如果是 Promise，就暂停执行、等它 resolve 后把结果赋给左边变量。但它只在 async 函数内部有效，且不能单独出现在顶层（除非用 top-level await）。

常见陷阱：

• uni.request、wx.request、XMLHttpRequest 等原生 API 不返回 Promise → 直接 await this.api() 会报错或静默失效
• 必须手动封装成 Promise：

  function requestWithPromise(options) {
    return new Promise((resolve, reject) => {
      uni.request({
        ...options,
        success: res => res.statusCode === 200 ? resolve(res.data) : reject(res),
        fail: reject
      });
    });
  }

• 封装后才能放心 await：const data = await requestWithPromise({ url: '/user' });

错误处理：别裸写 await，必须配 try/catch

await 遇到 rejected Promise 会直接抛出异常，不 catch 就崩。这和 .then().catch() 的链式错误捕获不同——它更像同步代码里的 throw。

async function fetchUser() {
  try {
    const res = await fetch('/api/user');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('获取用户失败:', err.message);
    throw err; // 或返回默认值、空对象等
  }
}

• 一个 try 可包裹多个 await，避免每个都写 .catch()
• 不要只 console.error 就完事——记得 throw 或 return 明确状态，否则调用方无法感知失败
• 注意：catch 会捕获 fetch 失败、json() 解析失败、甚至 undefined.xxx 这类运行时错误

并发请求：别傻等，用 Promise.all + await 解决

如果多个请求互不依赖，用 await 串行写会变慢。正确做法是先发所有请求，再一起 await：

async function loadUserProfile() {
  try {
    const [userRes, postsRes, commentsRes] = await Promise.all([
      fetch('/api/user'),
      fetch('/api/posts'),
      fetch('/api/comments')
    ]);
    const [user, posts, comments] = await Promise.all([
      userRes.json(),
      postsRes.json(),
      commentsRes.json()
    ]);
    return { user, posts, comments };
  } catch (err) {
    console.error('加载资料失败', err);
  }
}

• Promise.all 中任意一个 reject，整个就 reject ——如需容错，改用 Promise.allSettled
• 不要写成：await fetch(...); await fetch(...) ——这是串行，耗时是总和
• 浏览器兼容性：Promise.allSettled 在 Safari 13+ / Chrome 76+ 才支持，旧环境需 polyfill

真正的简化，不在于少写几个 .then，而在于让控制流回归人脑习惯：顺序、分支、循环、错误出口都清晰可见。最容易被忽略的一点是——await 不是万能胶，它只粘得牢 Promise；一旦遇到回调型 API，第一步永远是封装，而不是硬加 await。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。