（四）ES6学习笔记-async和await

async和await是为了解决异步函数调用时产生回调地狱的问题，一般一起使用，本质是通过Promise+generrator方案的语法糖来实现，其中async来替代*，await来替代yield,具体实现代码参考TJ的第三方包co

1.异步函数async function

01.async是asynchronous单词的缩写，译为异步、非同步，其中sync是synchronous单词的缩写，译为同步、同时，书写方式如下：

// async异步函数的书写方式
async function foo1() {}

const foo2 = async () => {}

class Foo {
  async bar() {}
}

02.async function的代码运行顺序与普通函数并无区别，代码如下：

// 异步函数的执行流程
async function foo() {
  console.log('foo start~');

  console.log('内部执行代码1');
  console.log('内部执行代码2');
  console.log('内部执行代码3');

  console.log('foo end~');
}

console.log('code start');
foo() 
console.log('code end');

/* 
打印如下：
code start
foo start~
内部执行代码1
内部执行代码2
内部执行代码3
foo end~
code end
*/

03.async function的代码与普通函数的区别：1.async异步函数的返回值一定是一个Promise、2.异步函数中的异常会被作为异步函数返回Promise中reject的值

async function foo() {
  console.log('foo start~');
  console.log('foo end~');
  // 等同于 return 123
  // return new Promise((resolve, reject) => {
  //   resolve(123)
  // })
  return 123
}

// 异步函数的返回值一定是一个Promise
const promise = foo()

// 这里的then方法会等到foo函数的return时执行,res是return的值
promise.then(res => {
  console.log('then exec:' + res);
})

04.async中使用await关键字

function requestData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve(222)
      reject(333)
    }, 2000)
  })
}
// 1.await跟上表达式
// async function foo() {
//   // 当await requestData()没有结果的时候后面的代码不会执行
//   const res = await requestData()
//   // await后面的代码相当于是requestData函数then方法内执行的
//   console.log("后面的代码1：" + res);
//   console.log("后面的代码2");
//   console.log("后面的代码3");
// }

// 2.await跟上其他的值
// async function foo() {
//   const res1 = await 123
//   console.log('res1:' + res1);
// }

// 3.reject值
async function foo() {
  const res2 = await requestData()
  console.log('res2:' + res2);
}
foo().catch(err => {
  console.log('err:', err);
})