javascript中async/await详解

最新推荐文章于 2024-09-26 17:00:53 发布

李白焰

最新推荐文章于 2024-09-26 17:00:53 发布

阅读量4k

点赞数

分类专栏： JavaScript 文章标签： javascript es6

本文链接：https://blog.csdn.net/abxxcd/article/details/108226045

版权

本文详细介绍了JavaScript中的async/await用法，包括async如何声明异步函数，await如何等待异步操作完成。讲解了await操作的顺序，以及async与Promise的执行差异。对比了async函数与Promise在处理异步请求时的优势，指出async简化了代码编写，减少了回调地狱，但并非所有场景都适合替代Promise，例如并发请求时。

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

async,await

async是Generator的语法糖，异步编程的终极解决方案，彻底解决回调地狱的问题

async用来声明一个function是异步的，而await用来等待一个异步函数的执行

注意:
await只能出现在async函数里面

async

async function asyncfunc() {
    return '奥里给'
}
const result = asyncfunc()
console.log(result) // Promise
result.then((val)=> {
    console.log(val) // 奥里给
})

这里我们可以看到async函数输出的是一个Promise对象,如果async函数中没有返回值它会返回一个Promise.resolve(undefined)

await

await可以理解为async wait
await在我看来是先执行右侧表达式,再等待右侧表达式的返回值
await后面可以跟任何的JS表达式
如果await等待的不是Promise对象,那await的返回值就是右侧表达式的运算结果。
如果await等到的是Promise对象,那await就会阻塞后面的代码,等待Promise对象执行resolve(),await的返回值就是此resolve()中的参数

注意: 这里讲的阻塞指的是async函数内部的阻塞。来，举个例子：

// 1. 正常Promise
  new Promise((resolve, reject) => {
   
    console.log(1);
    resolve(4);
  }).then((val) => {
   
    console.log(val)
  })
  new Promise((resolve, reject) => {
   
    console.log(2);
    resolve(5);
  }).then((val) => {
   
    console.log(val)
  })
  new Promise((resolve, reject) => {
   
    console.log(3);
    resolve(6);
  }).then((val) => {
   
    console.log

最低0.47元/天解锁文章