一、Promise是什麼?
Promise是一種JavaScript 語言中的物件,利用這個物件讓解決非同步問題的寫法更加簡潔直觀且好用。
二、為什麼要用Promise?
Promie是一種處理非同步問題的方法,非同步問題如前端向後端要取資料,資料並不是馬上回來,需要等待,以往利用callback方式解決,但寫法相較Promise利用.then()、.cathc()會較不直觀,利用Promise可以讓寫法更加簡潔直觀。
三、 Promise要怎麼用?
一般向後端取資料日常
- 向後端發起服務
- 把取回的資料,塞到本地。
callback寫法
//callback 寫法
let datafunction getDataWithCallback(callback){
$.ajax({
url:'XXX',
type:'get',
success:function(res){callback}
error:function(){}})
}getDataAndDealWithCallback(x=>{data = x.data});
Promise改寫
將程式碼利用Promise包裝起來並回傳,
定義reslove():成功後要回傳資料
定義reject():失敗後要回傳資料
//Promise 寫法
let datafunction 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使用好了。