async/await的使用和理解

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。

首先我们要理解async函数的几个要点：

返回值是Promise

不管是否return，都会返回一个Promise对象。

相当于执行：
```
return Promise.resolve(value)
// 如果函数没有return，则value是undefined
```
使用了await命令，则一定要await后面的代码执行完之后才会执行下面的代码，不管await后面是一个异步还是同步函数。

正是因为这个命令，才让js的异步代码看起来像同步代码一样，从上至下依次执行。
给await命令赋值，会得到什么值
```
const v = await f()
```
如果f函数返回的是基础值，那v就是这个返回值

如果f函数返回的是Promise对象，那v就是这个Promise对象的resolved或rejected值

清楚了上面的代码后，我们开始用代码来说话

async function f() {
  return 'res'
}
const v = f()
console.log(v) // Promise {<resolved>: 'res}

async function f() {
  return new Promise((resolve, reject) => resolve('res'))
}
const v = f()
console.log(v) // Promise {<resolved>: 'res}

没有问题，返回的是Promise对象，这时我们加await命令，看一下效果：

async function f() {
  return 'res'
}
async function excute () {
  const v = await f()
	console.log(v) // res
}

async function f() {
  return new Promise((resolve, reject) => resolve('res'))
}
async function excute () {
  const v = await f()
	console.log(v) // res
}

也没有问题，如果是返回值是Promise对象，那么v值就是这个Promise对象的resolved或reject值

加一点难度

async function f() {
  return new Promise((resolve, reject) => resolve('res')).then(res => {
    console.log(res) // res
  })
}
async function excute () {
  const v = await f()
	console.log(v) // undefined
}

为什么v是undfined？

链式调用返回值永远都是最后一个调用的返回值，上面做对的then未return，所以返回的就是undefined

只需在then方法return你要返回的值就行了

async function f() {
  return new Promise((resolve, reject) => resolve('res')).then(res => {
    return res
  })
}
async function excute () {
  const v = await f()
	console.log(v) // res
}

再升级一下难度

async function f() {
  return new Promise((resolve, reject) => resolve('res'))
}
async function excute () {
  const v = await f().then(res => {
    return 'result'
  })
	console.log(v) // result
}

其实和上面是一样的逻辑，await得到是它后面的所有代码执行的结果，而且是得到最终结果后才会执行同一执行环境它下面的js代码

async/await的使用和理解

猜你喜欢