介紹Promise和Async/Await

Promise 是什麼？

Promise是一個ES6的語法，專門用來處理非同步行為，
在以前沒有Promise的時候，我們常用callback 的方式來處理，
但如果要處理的事情很多，callback就會變得不容易閱讀，造成所謂的「callback hell」

而Promise的出現，可以讓我們用更簡潔的寫法來處理非同步的行為，提升可讀性和可維護性。

使用方法

用new Promise建立一個 Promise 物件，
它帶有兩個參數resolve, reject，分別代表成功與失敗，

function myPromise(){
    return new Promise((resolve, reject)=>{
    })
}

成功後可以用.then(）抓取結果，失敗則用.catch()

Demo1

function myPromise(isTrue){
    return new Promise(function(resolve, reject) {
        window.setTimeout(function() {
            if(isTrue){
                //成功
                resolve('Success');
            }else{
                //失敗
                reject('Fail');
            }
        }, 0)
    })
}


myPromise(true)
    .then(res => {
        console.log(res)
    })
    .catch(res => {
        console.log(res)
    })

結果：Success
如果不帶參數，就會被reject，然後被catch捕捉輸出Fail

Demo2 - Promise Chain

如果我們有多個非同步行為，無法得知每個完成的時間，
但又要讓它們依照順序執行，此時就可以用Promise的then來串接。

//有testA() testB() testC()三個非同步行為，
function testA() {
    return new Promise(function(resolve, reject) {
        window.setTimeout(function() {
            console.log('Success A')
            resolve('Success A')
           //這裡用Math.random()模擬不定的時間
        }, Math.random() * 1000)
    })
}

function testB() {
    return new Promise(function(resolve, reject) {
        window.setTimeout(function() {
            console.log('Success B')
            resolve('Success B')
        }, Math.random() * 1000)
    })
}

function testC() {
    return new Promise(function(resolve, reject) {
        window.setTimeout(function() {
            console.log('Success C')
            resolve('Success C')
        }, Math.random() * 1000)
    })
}

testA()
    .then(testB)
    .then(testC)

Demo3 - Promise.all

接續demo2，假設我是要三個非同步行為都完成後，才做下一件事，
這個時候就可以用Promise.all

Promise.all([
  testA(),
  testB(),
  testC()
])
.then(res => {
  console.log(res[0],res[1],res[2])
})

Async/Await

Async/Await底層也是Promise，它其實就是Promise的語法糖而已，看起來更簡潔俐落，更像在寫同步程式碼。

Async，放在function前，意思是宣告是一個非同步函式，並且會回傳一個Promise物件
Await，等待，在收到Promise回應前，後面的程式都會暫時停止

使用方法

//這裡把上面demo2改成async/await的方式撰寫 

//建立一個async function
async function myAsync() {
    let result;

    //當遇到await，async function就會知道要先暫停，等執行完後再跑後面的程式
    //這裡就會依序執行testA()->testB()->testC()
    result = await testA();
    result = await testB();
    result = await testC();
}

myAsync();