promise的使用

以前使用promise都是用時會,用時理解,事後一段時間沒有又忘了,今天有空正好整理一下,方便往後本身查閱。-- 代碼來源於阮一峯老師的 promise數組

 Promise有4個方法:promise

[ resolve,  reject,  all,  race ]dom

常見的resolve和reject  異步

 resolve: 成功時的回調函數函數

 reject:    失敗時的回調函數spa

//定義 Promise 的回調函數
function test(resolve, reject) {
  //採用隨機數來模擬成功和失敗。
  var timeOut = Math.random() * 2;
  console.log('set timeout to: ' + timeOut + ' seconds.');
  setTimeout(function(){
    if (timeOut < 1) {
      // 成功 resolve
      console.log('call resolve()....');
      resolve('200 ok');
    } else {
      // 失敗 reject
      console.log('call reject()...');
      reject('timeout in:' + timeOut + ' seconds.');
    }
  }, timeOut * 100);
}


new Promise(test)
.then(result => { //成功後進行的代碼操做
 console.log('success');
})
.catch(reason => { //失敗後進行的代碼操做
 console.log('fail');
})

 

這裏的test回調函數是來處理請求數據,接口等的, 然後面的then就是來執行請求成功後的操做, catch是來處理失敗後的操做。code

 

Promise.all(數組)  同時進行的異步操做blog

// Promise.all(數組)  同時進行的異步操做
var p1 = new Promise((resolve, reject)=>{
 // 採用隨機數來模擬成功和失敗。
var err = Math.random() > .5 ? true : false; if (err) { setTimeout(reject, 600, 'P1'); } else { setTimeout(resolve, 600, 'P1'); } }) var p2 = new Promise((resolve, reject)=>{
//採用隨機數來模擬成功和失敗。
var err = Math.random() > .5 ? true : false; if (err) { setTimeout(reject, 300, 'P2'); } else { setTimeout(resolve, 300, 'P2'); } }) //p1,p2操做成功就執行then Promise.all([p1, p2]).then(results=>{ console.log('成功: '+results); }) //p1,p2其中有一個操做失敗就執行catch .catch(reason=> { console.log('錯誤:'+reason); })

 

Promise.race([p1, p2]) 對同時進行的異步操做,那個先執行完就採用那個(好比:同時向兩個URL讀取用戶的我的信息,只須要得到先返回的結果便可。[阮一峯老師的好比])接口

var p1 = new Promise((resolve, reject)=>{
  var err = Math.random() > .5 ? true : false;
  if (err) {
    setTimeout(reject, 600, 'P1');
  } else {
    setTimeout(resolve, 600, 'P1');
  }
})

var p2 = new Promise((resolve, reject)=>{
  var err = Math.random() > .5 ? true : false;
  if (err) {
    setTimeout(reject, 300, 'P2');
  } else {
    setTimeout(resolve, 300, 'P2');
  }
})


// p1,p2同時操做,哪個先獲得結果就執行那個,成功執行then,失敗就執行catch
Promise.race([p1, p2]).then(results=>{
 console.log('成功: '+results);
}).catch(reason=> {
 console.log('錯誤:'+reason);
})

完(皮皮蝦, 皮一下)。get

相關文章
相關標籤/搜索