极简三分钟ES6 - ES8中async,await

基础概念:快递员与包裹

想象我们要接收两个快递

  • 传统回调/Promise :反复查物流(.then()嵌套),流程繁琐
  • async/await :告诉快递员(async函数)"到了叫我"(await),那我们就能专心做其他事
js 复制代码
// 传统 Promise 链 
fetchData()
  .then(data => process(data))
  .then(result => console.log(result)) 
  .catch(err => console.error(err)); 
 
// async/await 写法 
async function handleData() {
  try {
    const data = await fetchData(); // 等包裹送达 
    const result = await process(data); // 拆包裹后加工 
    console.log(result); 
  } catch (err) {
    console.error(err);  // 包裹异常统一处理 
  }
}

使用规则详解

async 标记异步函数

函数前加 async自动返回 Promise 对象

js 复制代码
async function getNum() { return 42; }
getNum().then(num => console.log(num));  // 输出 42 

await 暂停等待结果

async 函数内使用,暂停代码执行直到右侧表达式完成

js 复制代码
async function demo() {
  console.log(" 开始等待");
  await new Promise(resolve => setTimeout(resolve, 2000)); // 等 2 秒 
  console.log(" 等待结束");
}

错误处理:try/catch 替代 .catch()

用同步语法捕获异步错误

js 复制代码
async function fetchUser() {
  try {
    const user = await fetch("/api/user");
    console.log(user); 
  } catch (error) {
    console.error(" 请求失败:", error);
  }
}

解决四大痛点

痛点场景 async/await 方案 传统方案问题
回调地狱 扁平化代码结构 多重嵌套难维护
Promise 链中断 try/catch 直接捕获错误 需每个 .then() 后接 .catch()
同步取值困难 const res = await asyncTask() 需在 .then() 内操作
条件分支处理复杂 直接写 if/else 逻辑 链式调用分支混乱

一些常见的使用场景

按顺序调用多个接口

js 复制代码
async function initPage() {
  const user = await getUserInfo();      // 等用户数据 
  const orders = await getOrders(user.id);  // 用用户ID查订单 
  renderPage(user, orders);              // 渲染页面 
}

循环中的异步操作

js 复制代码
async function batchDownload(urls) {
  for (const url of urls) {
    const data = await download(url); // 等上一个下载完 
    saveToDisk(data);
  }
}

并行优化:Promise.all 搭配使用

js 复制代码
async function loadAll() {
  const [news, ads] = await Promise.all([ 
    fetchNews(),
    fetchAds()
  ]); // 同时发请求,等全部返回 
  return { news, ads };
}

牢记

"async 造个快递员,await 坐等不焦虑,错误抓进 try/catch,异步同步两相宜。"

相关推荐
HashTang4 分钟前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
Cory.眼17 分钟前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
前端架构师-老李41 分钟前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡1 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
拖拉斯旋风1 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
用户21496515898751 小时前
从零搭建uniapp环境-记录
前端
可触的未来,发芽的智生3 小时前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理
努力写代码的熊大3 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh3 小时前
前端常见的设计模式
前端·设计模式