js中promise的幾種用法
阿新 • • 發佈:2019-01-09
promise解釋:
一種非阻塞非同步執行的抽象概念.
如果我們想在promise之後執行某些操作,只能通過then回撥(請求成功時)或者catch回撥(請求失敗時),整個函式又會返回一個promise,只會在then裡執行下一步操作.
let success = Promise.resolve("success"); let failure = Promise.reject("failure"); let res_success = success.then(res=>{ console.log("成功了:"+res) }).catch(err=>{ console.log("失敗了:"+err) });//then裡執行 let res_failure = failure .then(res=>{ console.log("成功了:"+res) }).catch(err=>{ console.log("失敗了:"+err) });//catch裡執行 //同時 res_success和res_failure也是一個promise //我們能在then回撥裡拿到success或failure的then或catch裡返回的結果(如果沒返回則是undefined)
幾個應用場景:
- 有順序的執行某些請求,我們把每個請求(promise形式)串起來搞成鏈式呼叫.
-
//驗證 function getAuth(){ return new Promise((res,rej)=>{ //關鍵程式碼 }) } //使用者資訊 function getUsers(){ return new Promise((res,rej)=>{ //關鍵程式碼 }) } //頁面資訊 function getPageInfo(){ return new Promise((res,rej)=>{ //關鍵程式碼 }) } //請求順序:先驗證 => 再拿使用者 => 再拿頁面資訊 getAuth().then(res => { if(res.success){ //驗證通過,請求使用者資訊 return getUsers(); }else{ return Promise.reject(); } }).then(res => { if(res.success){ //成功獲取使用者資訊,請求頁面資訊 return getPageInfo(); }else{ return Promise.reject(); } }).then(res => { if(res.success){ //成功獲取頁面資訊,反射資料到檢視上 //over request } })
- 同時傳送多個關聯請求,使用Promise.all([ promise1,promise2 ])(只要失敗一個就算失敗);
- 同時傳送多個並行的請求,失敗的記錄,成功的執行相應的邏輯
-
function requestMain(urls,successfn,failurefn){ //圖片url資源路徑 let urls = [ 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2363246672,1942618513&fm=58', 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4138785756047,2461366902&fm=58', 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=378711121878161,3674972757&fm=58', 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2412121295993728,2346220807&fm=58', ]; let errorArr = [];//記錄錯誤的資訊 //構建promise的函式 function generatePromise(url){ return new Promise((res,rej)=>{ // }) } // urls.reduce((promise,url,index)=>{ promise.then(res => { //請求成功執行的回撥 successfn(res); }).catch(err=>{ //失敗時,記錄失敗資訊 errorArr.push(err); }).then(()=>{ if(index === urls.length-1 && errorArr.length > 1){ //全部請求完,並且錯誤陣列不為空時執行回撥 failurefn(errorArr); }else{ promise = generatePromise(url) } }) },Promise.reject(false)) }