JavaScript基础（八）Async/Await

大家好，我是蓝胖子的小叮当，今天分享的是JavaScript的第八章Async/Await，大家在阅读期间有任何的意见或建议都可以留言给我哈！

8.1前言

async和await是一个异步编程的语法糖，本质是promise语法的简化版，用同步代码的书写方式处理异步操作，让异步编程更加直观和清晰。

8.2async函数

async用于声明一个异步函数，其作用是隐式的返回一个promise对象，无论函数内部是否存在显式的返回值，async函数的调用都会返回一个promise实例对象。

js 复制代码

// 声明异步函数
async function getData() {
  return { name: "张伟", occupation: '律政先锋' };
}

// 调用函数
const dataFun = getData();
// 验证async函数的返回为一个promise实例
console.log(dataFun instanceof Promise); // true

// 通过then获取结果
dataFun.then(res => console.log(res)); // {name:'张伟',occupation:'律政先锋'}

async函数的显式返回值：若函数正常返回值，promise执行resolve，返回值通过then获取；若函数抛出异常，promise执行reject，返回值通过catch获取。

js 复制代码

// 声明异步函数
async function getStatus(type) {
  if(type==true){
      return "结果为true";
  }else{
      throw new Error("结果为false");
  }
}

// 验证返回值
getStatus(true).then(console.log).catch(err=>{console.log(err)})//结果为true
getStatus(false).then(console.log).catch(err=>{console.log(err)})//Error: 结果为false

8.3await关键字

await只能在async中使用，不然会报错，用于暂停函数的执行，等到promise的状态改变

js 复制代码

// 等待Promise对象
async function demo() {
  const result = await new Promise(resolve => {
    setTimeout(() => resolve("time1"), 1000);
  });
  console.log(result);
  console.log("time2");
}

demo();
// time1
// time2

若await后接非Promise值，会将其包装为已resolve的promise

js 复制代码

async function demo() {
  await '张伟'
  console.log('time1')
}

demo();
//time1

8.4并行执行多个异步任务

避免异步任务串行耗时（总耗时为其中的最长耗时）

js 复制代码

// 并行执行优化
async function getAllData() {
  const [data1, data2] = await Promise.all([
    getData(1),
    getData(2)
  ]);
}

getAllData();
// 避免串行耗时（总耗时为其中的最长耗时）

8.5执行顺序

我们在第一章事件循环中已经讲到，await后面的代码属于微任务； async函数的执行不会阻塞主线程，其内部代码会立即执行，await会暂停async函数的执行，但不会阻塞主线程。等待期间，主线程会继续执行其他任务，待promise状态改变后，通过微任务恢复async函数的执行。

js 复制代码

async function async1 () {
  console.log('async1 start')
  await async2();
  console.log('async1 end')
}
 
async function async2 () {
  console.log('async2')
}
 
console.log('script start')
 
async1();
 
console.log('script end')

//script start
//async1 start
//async2
//script end
//async1 end

8.6处理异常

书写async、await并不难，难点在于处理异常，采用try...catch...来处理异常

js 复制代码

async function demo() {
  try {
    // 可能失败的异步操作
    const result = await new Promise(resolve => {
      setTimeout(() => resolve("time1"), 1000);
    });
    return result;
  } catch (error) {
    console.error("操作失败:", error);
    return null; // 或抛出特定错误
  }
}

demo().then(res=>{console.log(res)})
//time1

8.7注意事项

await需在async中使用，否则会报错；
await后的promise的异常抛出，需用try-catch捕获；
await暂停的是函数内部代码，主线程仍可处理其他任务；
await后面的代码属于微任务，会塞入微任务队列；
async函数返回的是一个promise对象，有无值看有无return值；

好啦，关于Async/Await的知识点就总结到这里，如果有什么疑问、意见或建议，都可畅所欲言，谢谢大家，我也将持续更新。

预告：不清楚Map、Set、Object怎么区分？欢迎收看JavaScript基础的下一章：Map、WeakMap、Set、WeakSet、Object