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('主執行緒執行完了！');

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

3

33

3

3

3

3

3

3

3

3

3

33

33

3

3

3

3

3

3

3

3

3

3