[Javascript]ES7的Async和Await

前言

這陣子都在看JS，然後發現ES6跟ES7冒了一堆東西出來。
也只能挑比較有可能會用到的先瞭解一下。
沒寫Code之後，很多東西都沒再看了阿…

正文

在C#裡面其實也有async以及await，
解釋可以看一下 程式的同步（SYNCHRONOUS）與非同步（ASYNCHRONOUS）的差別
印象中是有寫過async 跟await的C＃，但剛剛才發現我沒記錄起來。
等哪天有用到再補了吧（應該很難）
本次的範例是根據 [JAVASCRIPT]用FETCH 取代XMLHTTPREQUEST 取值 變化而來的。
先來看一下沒有async的程式 (完整程式碼-jsfiddle)

var url =
      "https://api.unsplash.com/photos/?client_id=812193ef71ca946e361ed541979a0cfd91e9419a19235fd05f51ea14233f020a&per_page=5";
var container = document.querySelector("#container");
~ function(){
  console.log("start ");
  fetch(url,{method:'get'})
  .then(rsp => {
          console.log("Get Data!");
      return rsp.json()
  })
  .then(function(rsp){
       rsp.forEach(function(item,index){   
        let imgUrl = item.urls.thumb;
        let img = document.createElement("img")
        img.setAttribute("src",imgUrl);
        container.appendChild(img);
        console.log(item.urls.thumb);
      })
       console.log("Finish GetData!")
  })
  .catch(err => {
    console.log('error' + err);
  })
  console.log("End!")
}();

來看一下console.log 列印出來的資料

"start "
"End!"
"Get Data!"
"https://images.unsplash.com/photo-1588773781731-806113dbd92b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE4NjI1fQ"
"https://images.unsplash.com/photo-1592565276465-eb37e77054a6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE4NjI1fQ"
"https://images.unsplash.com/photo-1592567165747-979beff86be6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE4NjI1fQ"
"https://images.unsplash.com/photo-1592554531406-193a0424e598?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE4NjI1fQ"
"https://images.unsplash.com/photo-1592507486456-b78e76d3c6b0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE4NjI1fQ"
"Finish GetData!"

因為中間牽扯到promise，導致執行的方式變成這樣。
先將外面的程式碼執行完畢後，再執行promise裡面的程式。
如果要讓他照著順序跑，則必須加入async 以及 await。
如下(完整程式碼-jsfiddle)

var url =
      "https://api.unsplash.com/photos/?client_id=812193ef71ca946e361ed541979a0cfd91e9419a19235fd05f51ea14233f020a&per_page=5";
var container = document.querySelector("#container");
~async function(){
  console.log("start ");
  await fetch(url,{method:'get'})
  .then(rsp => {
          console.log("Get Data!");
      return rsp.json()
  })
  .then(function(rsp){
      rsp.forEach(function(item,index){   
        let imgUrl = item.urls.thumb;
        let img = document.createElement("img")
        img.setAttribute("src",imgUrl);
        container.appendChild(img);
        console.log(item.urls.thumb);
      })
      console.log("Finish GetData!")
  })
  .catch(err => {
     console.log('error' + err);
  })
  console.log("End!")
}();

結果就會照著順序將資料印出

"start "
"Get Data!"
"https://images.unsplash.com/photo-1588773781731-806113dbd92b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE4NjI1fQ"
"https://images.unsplash.com/photo-1592565276465-eb37e77054a6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE4NjI1fQ"
"https://images.unsplash.com/photo-1592567165747-979beff86be6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE4NjI1fQ"
"https://images.unsplash.com/photo-1592554531406-193a0424e598?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE4NjI1fQ"
"https://images.unsplash.com/photo-1592507486456-b78e76d3c6b0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE4NjI1fQ"
"Finish GetData!"
"End!"

另外，

~async function(){

}();

代表網頁載入時先執行這段。
也可以使用，但是下面的方式並沒有async

$(function(){


});

至於為什麼要這樣寫，猜測是為了要加上async的關係，所以才有~ 這個符號的出現。
另外 ~ 這個符號也有其他的意思，可參考 jsfiddle。
目前來看還有一個promise要補
ref.
簡單理解 JavaScript Async 和 Await
鐵人賽：JavaScript Await 與 Async
如何透過錯誤的 await 來造成效能低落