JS的async和await

学习了coderwhy的JavaScript高级语法视频课的笔记

如有错误或者不合适的地方，敬请见谅，欢迎指出和拓展，谢谢各位了

1. 异步函数 async function

• async关键字用于声明一个异步函数：
  • async是asynchronous单词的缩写，异步、非同步；
  • sync是synchronous单词的缩写，同步、同时。

// 1、async异步函数的写法
async function foo() {}

const foo2 = async () => {}

const foo3 = async function () {}

class Foo {
  async foo3() {}
}

2. 异步函数的执行流程

• 异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。

// 1、异步函数的执行流程
async function bar() {
  console.log('start')

  console.log('内容1')
  console.log('内容2')
  console.log('内容3')

  console.log('end')
}

console.log(111)
bar()
console.log(222)

/* 111
start
内容1
内容2
内容3
end
222 */

• 异步函数有返回值时，和普通函数会有区别：
  • 情况一：异步函数也可以有返回值，但是异步函数的返回值会被包裹到Promise.resolve中；
  • 情况二：如果我们的异步函数的返回值是Promise，Promise.resolve的状态会由Promise决定；
  • 情况三：如果我们的异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定。
• 如果我们在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为Promise的reject来传递。

async function foo() {
  console.log('start')
  console.log('内容')
  console.log('end')

  // 1、返回值是默认undefined，可以为普通的数值

  // 2、返回值是一个Promise
  //   return new Promise((resolve, reject) => {
  //     resolve('promise返回值')
  //   })

  // 3、返回值是一个thenable
  return {
    then: function (resolve, reject) {
      resolve('thenable返回值')
    }
  }
}

const promise = foo()

// 1、返回值是默认undefined，可以为普通的数值
// console.log(promise) //Promise { undefined }

// 2、返回值是一个Promise
// promise.then(res => {
//   console.log(res) //promise返回值
// })

// 3、返回值是一个thenable
promise.then(res => {
  console.log(res) //thenable返回值
})

// 抛出异常
async function foo() {
  console.log('start')

  console.log('内容')

  // 异步函数中的异常, 会被作为异步函数返回的Promise的reject值
  throw new Error('发生错误了！！！')

  console.log('end')
}

// 异步函数的返回值一定是一个Promise
foo().catch(err => {
  console.log(err)
})

console.log('aaaaa')

/* start
内容 
aaaaa
Error: 发生错误了！！！
...... */

3. await关键字

• async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。
• await关键字有什么特点呢？
  • 通常使用await是后面会跟上一个表达式，这个表达式会返回一个Promise；
  • 那么await会等到Promise的状态变成fulfilled状态，之后继续执行异步函数（相当于Promise回调resolve()后执行then方法中的代码）；
• 如果await后面是一个普通的值，那么会直接返回这个值；
• 如果await后面是一个thenable的对象，那么会根据对象的then方法调用来决定后续的值；
• 如果await后面的表达式，返回的Promise是reject的状态，那么会将这个reject结果直接作为函数的Promise的 reject值。

// 1、表达式是一个Promise
function requestDate() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(111)
    }, 2000)
  })
}

async function foo() {
  const res = await requestDate()
  console.log('两秒后打印结果：' + res) //两秒后打印结果：111
}

foo()

// 2、表达式是一个普通的值
async function foo2() {
  const res = await 222
  console.log('打印结果：' + res) //打印结果：222
}

foo2()

// 3、表达式是一个thenable对象
async function foo3() {
  const res = await {
    then: function (resolve, reject) {
      resolve(333)
    }
  }
  console.log('打印结果：' + res) //打印结果：333
}

foo3()

// 4、返回的表达式Promise是reject状态
function requestDate4() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(444)
    }, 2000)
  })
}

async function foo4() {
  const res = await requestDate4()
  // 和异步函数抛出异常一样，会被作为异步函数返回的Promise的reject值的，并且这里下面代码不会执行
  console.log('两秒后打印结果：' + res)
}

foo4().catch(err => {
  console.log('两秒后打印错误的结果：' + err) //两秒后打印错误的结果：444
})