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/