async/await的原理以及和promise的区别

一、async/await的基础使用

async/await是一套关于异步的解决方案。下面是它的基本使用。
注意！！
但是使用async/await的时候，无法捕获错误，需要通过try/catch来捕获。
async返回promise对象，只有当async函数内部的异步操作执行完，才会执行then方法的回调函数。

//定义一个异步函数
getJSON(){
 return 'JSON'
};
//在需要使用异步函数的函数前面加上async声明，声明这是一个异步函数
async testAsync(){
  //在异步函数前面加上await，代表执行完await声明的函数，在往下执行
  await getJSON();
  .....剩下的代码

}

二、async/await的原理

1.generator函数

generator函数：generator（生成器）是ES6标准新引入的数据类型。一个generator看起来像一个函数，但是可以执行多次。

• 通过next()执行，如果没有则不执行。
• 也可以通过next修改属性。
• yield只能在generator函数里。
• 遇到return直接返回最后的值,只能返回一个值。
• yield表示暂停执行，next方法表示回复执行。

function* Generator() {
            yield '11111111';
            yield '22222222'
            return '3333333';
        }

        let aaa = Generator();
        let a = aaa.next()
	    let b = aaa.next()
	    let c = aaa.next()
	    let d = aaa.next()
	    console.log(a,b,c,d) //  {value: "11111111", done: false}     {value: "22222222", done: false}      {value: "3333333", done: true}     {value: undefined, done: true}

2.async/await和Generator的关系

async函数就是generator的语法糖，只不过generator需要自己写执行器。async/await可以看成带自动启动器的generator函数的语法糖。
async/await只支持promise对象和原始值，不支持thunk函数。

1. 将*号替换成async，将yield替换成await
2. co库约定，yield命令后面只能是thunck函数或promise对象，但是async函数的await命令只能是promise对象。
3. async函数可以看成多个异步操作，包装成一个promise对象，而await命令就是内部的then命令。

3.async/await和Promise的关系

async/await其实是基于Promise对象的。async函数其实是把Promise包装了一下，看起来更简洁了。
demo1：

 function getJson(){
      return new Promise((reslove,reject) => {
        setTimeout(function(){
          console.log(2)
          reslove(2)
        },2000)
      })
     }
    async function testAsync() {
       await getJson()
       console.log(3)
    }

    testAsync()

上面的代码真正解析：
demo1：

function getJson(){
    return new Promise((reslove,reject) => {
      setTimeout(function(){
        console.log(2)
        reslove()
      },2000)
    })
}
//async返回的是promise对象，await也是，只不过把await后面的代码放在await返回的promise的.then后面。
function testAsync() {
    return new Promise((reslove,reject) => {
        getJson().then(function (res) {
          console.log(3)
        })
    })
}

testAsync()

三、async/await与promise的区别

• 函数前使用关键字async，await只能用在async标记的函数内。
• 比promise更简洁
• 处理结果上：promise需要使用.then()来处理promise返回的结果，而async/await则直接在代码上顺序处理结果。
• 错误处理：promise如果在then里出现异常，只能用promise的catch函数来捕获，外面的try/catch捕获不到。async/await可以同时捕获异步和同步代码抛出的异常。
• 中间值上

const makeRequest = () => {
  return promise1()
    .then(value1 => {
      // do something
      return promise2(value1)
        .then(value2 => {
          // do something          
          return promise3(value1, value2)
        })
    })
}

async/await获取value1：

const makeRequest = async () => {
  const value1 = await promise1()
  const value2 = await promise2(value1)
  return promise3(value1, value2)
}

https://www.cnblogs.com/zhengyufeng/p/11106901.html
http://www.javanx.cn/20180904/js-async-await-rromise/