#Js篇:async函数&&await 命令

async函数

定义

是 Generator 函数的语法糖。

Generator 函数的引入为 JavaScript 中异步编程提供了一种更为直观和易于理解的方式

返回

async函数的返回值是Promise对象,

基本用法

使用 async 关键字声明的函数会自动返回一个 Promise 对象,无需手动创建。这使得异步函数更容易与其他异步操作协同工作。

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。

当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

async function f() {
  return 'hello world';
}

f().then(v => console.log(v))
// "hello world"

async函数内部return语句返回的值,会成为then方法回调函数的参数。

上面代码中,函数f内部return命令返回的值,会被then方法回调函数接收到

async函数内部抛出错误,会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

await命令

定义

正常情况下,await命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值。

错误处理

如果await后面的异步操作出错,那么等同于async函数返回的Promise对象被reject。

防止出错的方法,也是将其放在try...catch代码块之中

如果有多个await命令,可以统一放在try...catch结构中。

async function main() {
  try {
    const val1 = await firstStep();
    const val2 = await secondStep(val1);
    const val3 = await thirdStep(val1, val2);

    console.log('Final: ', val3);
  }
  catch (err) {
    console.error(err);
  }
}
使用注意点

第一点,前面已经说过,await命令后面的Promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中。

第二点,多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。

上面代码中,getFoogetBar是两个独立的异步操作(即互不依赖),被写成继发关系。这样比较耗时,因为只有getFoo完成以后,才会执行getBar,完全可以让它们同时触发。

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

上面两种写法,getFoogetBar都是同时触发,这样就会缩短程序的执行时间。

第三点,await命令只能用在async函数之中,如果用在普通函数,就会报错。

async 函数与 Promise的区别

  1. 返回值类型:
    • async 函数总是返回一个 Promise 对象。即使在函数内部使用 return 返回非 Promise 类型的值,它也会被隐式地包装成一个解决的 Promise 对象。
    • 普通函数返回的是函数执行的结果,而 async 函数返回的是一个 Promise 对象。
  2. 语法简洁性:
    • async 函数的语法更为简洁,可以使用 await 关键字来等待异步操作的完成,而不需要手动创建 Promise 链。
    • Promise 需要通过 .then().catch() 来处理异步操作的结果,导致可能出现较深的嵌套(回调地狱)。
  3. 错误处理:
    • async 函数内部可以使用 try...catch 来捕获和处理异步操作的错误,使得错误处理更加方便。
    • Promise 中,错误处理通常通过 .catch() 方法,或者在 .then() 中的第二个参数进行。
  4. 使用场景:
    • async 函数适用于更直观地编写异步代码,特别是在处理多个异步操作时。
    • Promise 通常用于处理单一的异步操作,或者在不使用 async/await 语法的情况下进行异步编程。
  5. await 的使用:
    • await 只能在 async 函数内部使用,用于等待一个 Promise 对象解决,并返回其解决值。
    • 在普通函数或全局作用域中,无法使用 await 关键字。
  6. 可读性:
    • 使用 async/await 语法可以使异步代码更加直观和可读,避免了回调地狱,提高了代码的可维护性。
    • Promise 链的可读性较差,尤其是在处理多个异步操作时。

综合来说,async/await 是一种更现代、更清晰的异步编程方式,而 Promise 仍然是底层的异步处理机制,可以在某些场景下继续发挥作用。通常,使用 async/await 更容易理解和维护异步代码。

理解

  • 同步任务

操作在执行是会阻塞当前线程,只到该任务完成。

当遇到一个同步任务时,必须等待任务完毕,才继续往下执行

  • 异步任务

不阻塞当前线程

常见的异步任务: 定时器(setTimeout/setInterbal)、网络请求、Promise、async/await

异步任务的结果通常通过回调函函数 async await等但会方式返回给主线程处理

// 同步任务
let result = longRunningSyncFunction();
console.log(result); // 这行代码会在longRunningSyncFunction执行完之后才执行

// 异步任务
longRunningAsyncFunction().then(result => {
  console.log(result); // 这行代码会立即执行,然后在异步函数完成后得到结果
});
  • async await

提供了直观和易于理解的方式

async函数返回的是Promise对象

防止出错一般包裹在try…catch中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值