当前位置：首页 > 文章列表 > 文章 > 前端 > async/await让异步代码更简洁易读

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

2026-01-05 21:56:33 0浏览收藏

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

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

javascript中async和await是什么_如何简化异步呢

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