[JavaScript ES6] Promise 以及 async await


Posted by Powerfultraveling 's Blog on 2021-12-13

Promise 易讀性不好? async 與 await 就是要解決這個問題 !

在 ajax 技術出現之後,前端可以用非同步的方法抓取資料或是做一些比較複雜的計算,避免網站在進行到這一步時完全卡死。

而在最早期,JavaScript 是使用 callback function 來完成這個工作,但是他卻有一個大問題就是 callback hell,Promise 就是為了解決這個問題而出現的。

但是 promise 的寫法在易讀性上有些困難,而 async 以及 await 的工作就是為解決這個問題(是的他的工作就是這麼單純)。

接下來之接用 code 來展示兩個寫法的差異。

Promise

let makeNewVideo = true;

function check(){
    return new Promise((resolve, reject)=>{
        if(maekeNewVideo){
            resolve("new video uploaded");
        }else{
            reject("no new video");
        }
    })
}

check()
.then((res)=>{
    conosle.log(res)//成功的話傳到這 "new video uploaded"
})
.catch((err)=>{
    console.log(err)//失敗的話傳到這 catch method "no new video"
})

async await

let makeNewVideo =  false

async function check(){
    try{
        const res = await new Promise((reaolve, reject)=>{
            if(makeNewVidoe){
                resolve("new video upload");
            }else{
                reject("no new video")
            }
        })
        console.log(res)
    }catch(err){
        console.log(err)
    }
}









Related Posts

 SCSS - @extend vs @include

SCSS - @extend vs @include

methods、computed與watch的不同

methods、computed與watch的不同

畫frequency response和phase response(MATLAB))

畫frequency response和phase response(MATLAB))


Comments