JavaScript Promise 五分鐘

Jia
Oct 25, 2021

2021.10.25

  1. (What)Promise 是什麼?
  2. (Why) Promise為什麼要用?
  3. (How) Promise要怎麼用?
  4. (Other) Promise與其他部分

一、Promise是什麼?

Promise是一種JavaScript 語言中的物件,利用這個物件讓解決非同步問題的寫法更加簡潔直觀且好用。

二、為什麼要用Promise?

Promie是一種處理非同步問題的方法,非同步問題如前端向後端要取資料,資料並不是馬上回來,需要等待,以往利用callback方式解決,但寫法相較Promise利用.then()、.cathc()會較不直觀,利用Promise可以讓寫法更加簡潔直觀。

三、 Promise要怎麼用?

一般向後端取資料日常

  1. 向後端發起服務
  2. 把取回的資料,塞到本地。

callback寫法

//callback 寫法
let data
function getDataWithCallback(callback){
$.ajax({
url:'XXX',
type:'get',
success:function(res){callback}
error:function(){}})
}
getDataAndDealWithCallback(x=>{data = x.data});

Promise改寫
將程式碼利用Promise包裝起來並回傳,

定義reslove():成功後要回傳資料
定義reject():失敗後要回傳資料

//Promise 寫法
let data
function getDataWithPromise(){
return new Promise((reslove,reject)=>{
$.ajax({
url:'XXX',
type:'get',
success:function(reslove()){}
error:function(){reject()}})
})

}
getDataWithPromise().then(res=>{data = res.data})

四、Promise與其他部分

一、加入async await

本篇三分鐘筆記Promise用法,後續使用可搭配 async await 讓Promise 寫法更加優雅?讓非同步也能像同步寫法那樣直觀,拿上面的getDataWithPromise 加入 async await 寫法

//Promise + asyn await 寫法
let data
function getDataWithPromise(){...}
async function getAndSetData(){ data = await getDataWithPromise()
}

二、非同步處理威力加強版

平常處理非同步事件,其實Promise就能處理大多數案例,如果有更加複雜的就需要用到Rxjs 了,也是個坑阿,改天有空來寫寫五分鐘rxjs使用好了。

--

--

Jia

看一次不懂 就看兩次吧。每一天努力一點,不知不覺就會成為想像中的樣子的。 like60955@gmail.com