`async` 和 `await`

最新推荐文章于 2024-08-28 14:58:40 发布

司篂篂

最新推荐文章于 2024-08-28 14:58:40 发布

阅读量267

点赞数 5

分类专栏： Node.Js 文章标签： javascript

本文链接：https://blog.csdn.net/jkjkikik/article/details/136762907

版权

Node.Js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

本文详细解释了JavaScript中的async和await关键字，如何封装异步操作为Promise，以及如何使用await表达式简化异步代码，包括其工作原理、错误处理和与回调函数的区别。

摘要由CSDN通过智能技术生成

`async` 和 `await` 是 JavaScript 中用于处理异步操作的关键字，它们通常一起使用来简化异步代码的编写和阅读。

async:

async 用于声明一个函数，被声明的函数的函数体会被封装到一个 Promise 对象里，而函数的返回值就是 Promise 对象的PromiseResult。

function fn() {
    return Promise.resolve(10)
}
// 等价于
async function fn2() {
    return 10
}
fn().then(r => console.log(r))
fn2().then(r => console.log(r))

结果输出两个10
在这里插入图片描述

异步函数内部可以包含 await 表达式，用于等待 Promise 对象的解析（或拒绝）。


async function sum(a, b) {
    console.log(a + b)
    return a + b

}
async function fn6() {
    await sum(1, 8)
    console.log(1)
    console.log(2)
    console.log(3)
}
fn6()
console.log(4)

执行结果
在这里插入图片描述

异步函数内部可以抛出错误，会导致返回的 Promise 对象被拒绝，并传递错误信息。

await:

当 await 后面跟随一个 Promise 对象时，它会暂停异步函数的执行，直到该 Promise 对象解析（或拒绝）为止/直到异步代码执行有结果时，才会将结果返回。
同上一个例子


async function sum(a, b) {
    console.log(a + b)
    return a + b

}
async function fn6() {
    await sum(1, 8)
    console.log(1)
    console.log(2)
    console.log(3)
}
fn6()
console.log(4)

执行结果
在这里插入图片描述

如果 await 后面的 Promise 对象解析为一个值，await 表达式的结果就是这个值；如果 Promise 被拒绝，await 表达式会抛出一个错误，可以通过 try...catch 来捕获。

async function sum(a, b) {
    return a + b

}
async function fn3() {
    sum(123, 456)
        .then(r => sum(r, 8))
        .then(r => sum(r, 9))
        .then(r => console.log(r))

    // 当我们通过await去调用异步函数时，它会暂停代码的运行
    // 直到异步代码执行有结果时，才会将结果返回
    // 注意 await只能用于 async声明的异步函数中，或es模块的顶级作用域中
    // await阻塞的知识异步函数内部的代码，不会影响外部代码
    // 通过await调用异步代码时，需要通过try - catch来处理异常

    try {
        let result = await sum(123, 456)
        result = await sum(result, 8)
        result = await sum(result, 9)
        console.log(result)
    } catch (e) {
        console.log("出错了~~")
    }

}

使用 await 可以让异步代码像同步代码一样顺序执行，避免了回调地狱和嵌套的 Promise。

    async function sum(a, b) {
      return a + b
    }
    async function f() {
      result = await sum(1, 1)
      result = await sum(result, 1)
      result = await sum(result, 1)
      console.log(result)
    }
    function f1() {
      sum(1, 1)
        .then(r => sum(r, 1))
        .then(r => sum(r, 1))
        .then(r => console.log(r))
    }
    f()
    f1()

结果
在这里插入图片描述

await只能用于 async声明的异步函数中，或es模块的顶级作用域中
错误使用

await console.log(1)

报错
在这里插入图片描述

正确使用
- 把后缀名js改为mjs
- 在script标签内部加个type=“module”

<body>
  <script type="module">

    await console.log(1)

</script>
</body>

await会阻塞异步函数内部的代码，不会影响外部代码

 async function fn2() {
      console.log(1)
      await console.log(2)
      console.log(3)
    }

    // 等价于
    // function fn2() {
    // return new Promise(resolve => {
    // console.log(1)
    // console.log(2)
    // }).then(
    // console.log(3)
    // )
    // }

    fn2()
    console.log(666)

执行结果
在这里插入图片描述

如果async声明的函数中没有写await，那么它里边就会依次执行。当我们使用await调用函数后，当前函数后边的所有代码会在当前函数执行完毕后，被放入到微任务队里中（await后边的所有代码，都会放入到微任务队列中执行）

  async function fn2() {
      console.log(1)
      await console.log(2)
      console.log(3)
    }

    // 等价于
    function fn2() {
    return new Promise(resolve => {
    console.log(1)
    console.log(2)
    }).then(
    console.log(3)
    )
    }