极简三分钟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,异步同步两相宜。"

相关推荐
云舟吖9 小时前
Playwright的元素定位器
前端
我是日安9 小时前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js
浅浅的学一下9 小时前
实现在富文本中直接Ctrl+C复制图片并自动上传,并支持HTML格式的图片的复制
前端
wifi歪f9 小时前
🎨 探究Function Calling 和 MCP 的奥秘
前端·ai编程·mcp
BrendanDash10 小时前
React 19.2 已发布,现已上线 npm!
前端·react.js
sheji341610 小时前
【开题答辩全过程】以 Web数据挖掘在电子商务中的应用研究为例,包含答辩的问题和答案
前端·人工智能·数据挖掘
whltaoin10 小时前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
敲敲敲-敲代码10 小时前
web系统(asp.net和C#)
前端·c#·asp.net
IT_陈寒10 小时前
Python开发者必坑指南:3个看似聪明实则致命的‘优化’让我损失了50%性能
前端·人工智能·后端
初圣魔门首席弟子11 小时前
c++中this指针使用bug
前端·c++·bug