ECMA Script 6_異步編程之 Promise

Promise 對象

異步編程 方案，已同步的方式表達異步的代碼，解決回調地獄的問題

比傳統的解決方案——回調函數和事件——更合理和更強大

是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。

從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。

Promise 提供統一的 API，各類異步操做均可以用一樣的方法進行處理

• 基本使用

• const promise = new Promise(function(resolve, reject) {
      // ... some code
  
      if (/* 異步操做成功 */){
          resolve(value);
      } else {
          reject(error);
      }
  });
  
  promise
      .then(
          ()=>{
              console.log('成功的回調');
          },
          ()=>{
              console.log('失敗的回調');
          },
      );
  console.log('主線程執行完了');
  
  
  
  
  /**** 等同於 ****/ const promise = new Promise((resolve, reject)=>{ /* resolve 解決 成功 將 Promise 對象的狀態 由初始化變成成功 reject 拒絕 失敗 將 Promise 對象的狀態 由初始化變成失敗 Promise 三種狀態 初始化狀態 成功狀態 失敗狀態 */ setTimeout(function(){
   const result = 202; console.log('請求成功了'); resolve(result); // 觸發成功的回調
      }, 1000); }); promise.then(result=>{ console.log('成功的回調'+result); }).catch((result)=>{ console.log('失敗的回調'+result); }); console.log('主線程執行完了');

• Promise.resolve() 和 Promise.reject()    建立對象，狀態爲 成功 和 失敗
• Promise.all([要檢測的對象數組]);    // 在全部的 promise 都觸發 resolve 回調，纔會成功。
• 成功時接收 resolve ，失敗只接收 reject。結果爲數組
• 實例

• /**** 簡單 獨立異步任務 ****/
      const a = new Promise((resolve, reject)=>{
          setTimeout(function(){
              resolve("成功！");
          }, 1000);
      });
      
      const aa = new Promise((resolve, reject)=>{
          setTimeout(function(){
              resolve("成功！");
          }, 2000);
      });
      
      const aaa = new Promise((resolve, reject)=>{
          setTimeout(function(){
              resolve("成功！");
          }, 3000);
      });
      
      Promise.all([a, aa, aaa]).then(result=>{
          console.log(result);    // 接收到數組是 每一個 Promise 發送過來的結果
      }).catch(result=>{
          console.log(result);
      });
      
      console.log('主線程執行完了！');
      
  /**** 複雜 分線程關聯任務 ****/
      const b = new Promise((resolve, reject)=>{
          setTimeout(function(){
              console.log("Done1"+"First");
              resolve("Done1"+"First");
          }, 1000);
      });
      
      b.then(result=>{
          return  new Promise((resolve, reject)=>{
                      setTimeout(function(){
                          console.log("Done2"+result);
                          resolve("Done2"+result);
                      }, 2000);
                  });
      }).catch()
       .then(result=>{
          return  new Promise((resolve, reject)=>{
                      setTimeout(function(){
                          console.log("Done3"+result);
                          resolve("Done3"+result);
                      }, 3000);
                  });
      }).catch()
       .then(result=>{
          console.log("All Done!"+result);
      }).catch()
      
      console.log('主線程執行完了！');