介紹Promise和Async/Await


Posted by Andy Tsai on 2020-03-29

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();

#ES6 #Promise #javascript #Async #Await #w3HexSchool







Related Posts

[Day 4] 基本組成(下)

[Day 4] 基本組成(下)

[ JavaScript  12 ]  ES6 新增特性

[ JavaScript 12 ] ES6 新增特性

[ JavaScript 01 ] 基礎觀念

[ JavaScript 01 ] 基礎觀念



Comments