ES6入門教程——15、ES6 Promise 對象——異步編程的解決方案

Promise 是一個對象，從它可以獲取異步操作的消息。

Promise 狀態

Promise 異步操作有三種狀態：pending（進行中）、fulfilled（已成功）和 rejected（已失敗）。除了異步操作的結果，任何其他操作都無法改變這個狀態。

const p1 = new Promise(function(resolve,reject){
    resolve('success1');
    resolve('success2');
}); 
const p2 = new Promise(function(resolve,reject){  
    resolve('success3'); 
    reject('reject');
});
p1.then(function(value){  
    console.log(value); // success1
});
p2.then(function(value){ 
    console.log(value); // success3
});


//then的基本用法，參數中第一個函數是成功返回函數，第二個參數是失敗返回函數
  promise.then(function(value) {
      // success
  }, function(error) {
      // failure
  });

Promise 方法

Promise.all 的使用
如果傳入的參數中存在不是Promise實例，則會先調用Promise.resolve，將其轉爲Promise實例，再進一步處理。

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); 
});

//  [3, 1337, "foo"] 

Promise.all實現多個異步請求

 initData(code) {
      this.loading = true
      let p1 = new Promise((resolve, reject) => {
        favourableApi
          .timeQuery({ favourableCode: code })
          .then(res => {
            resolve(res)
          })
      })
      let p2 = new Promise((resolve, reject) => {
        favourableApi
          .query({
            favourableCode: code
          }).then(data => {
            resolve(data)
          })
      })
      Promise.all([p1, p2]).then(arry => {
        let data1= arry[0]//第一個異步返回
        let data2= arry[1]//第二個異步返回
        this.loading = false
      })
    },

Promise.race 的使用
race是竟跑的意思，因此返回的新實例狀態，是跟隨參數中最先改變狀態的那個實例；如果不是Promise實例，依舊先用Promise.resolve方法，轉化後再進一步處理。如果傳的迭代爲空，則返回的 Promise 永遠等待 。

var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one-resolve-500');
});

var promise2 = new Promise(function(resolve, reject) {
    setTimeout(reject, 400, 'two-reject-400');
});

Promise.race([promise1, promise2]).then(function(value) {
    console.log(value);
}, function(err) {
    console.log(err);
});

// two-reject-400