---
# System prepended metadata

title: promise、promise all?到底要承諾甚麼?

---

# promise、promise all?到底要承諾甚麼?




在使用Ajax來抓取遠端資料時,因為非同步的關係,

會等到所有的code都跑完之後,再跑回來讀取抓資料的code。


所以如果遇到需要抓完資料後,

才能執行的功能上,就會出現讓人崩潰的狀況 

![](https://i.imgur.com/qip5eJk.jpg)

資．料．跑．不．出．來!!!


所以Promise就很重要了,他會承諾你在全部的code執行完後,才會有所行動。


以下是promise的寫法:

```

let word = new Promise(function(resolve, reject) {

        resolve(); // 抓取成功
        reject();  // 抓取失敗
    
})

// new Promise(function(resolve, reject)括號裡的 resolve 跟 reject 可以隨意命名
   (你要叫abc, handsome...都可以,只是用預設的比較不會搞混)
```

那我要怎麼判斷現在是成功還是失敗?擺爛?

![](https://i.imgur.com/GqGkTVH.jpg)

其實promise可以用兩個方法來幫你:`.then`和`.catch`,這兩個方法差別在於,

`.then`在執行失敗之後還是會繼續執行下去,但是`.catch`不會,

所以說我們大多會用`.then`去接收成功的訊號,`.catch`則是用來接收失敗的訊號

```

function ISitGood(num) {

  return new Promise((resolve, reject) => {
  
    num ? resolve(`${num}, 成功`) : reject('失敗');
    
  });
  
}


////////////////////////////////////////////////////////////////////////
 
     貼心小註解:                                                        
                                                                    
      ISitGood(num)裡面的"?" 還有 ":" 是三元運算子的寫法,
      
      意思大概是"num是不是成立,如果是就等於resolve,不然就是reject" 
      

///////////////////////////////////////////////////////////////////////



ISitGood(1).then(success => {

    console.log(success);
    return ISitGood(2);
    
  }).then(success => {
  
    console.log(success);
    return ISitGood(0); // num=0即失敗,promise的結果為reject,這個階段會進入 catch
    
  }).then(success => {   // 由於上一個階段結果是 reject，catch收到失敗的訊號
  
    console.log(success);
    return ISitGood(3);
    
  }) .catch(fail => {
  
    console.log(fail);
    
  })
```

怎樣?很簡單吧?(其實複雜到哭RRRRR)
![](https://i.imgur.com/fVUsDDn.jpg)

然後如果今天要抓的資料太多,我們會使用promise的一個`.all`功能。

把所有的promise都執行完後,回傳一包陣列結果到系統上。

```

function ISitGood(num) {

  return new Promise((resolve, reject) => {
  
    num ? resolve(`${num}, 成功`) : reject('失敗');
    
  });
  
}

let datas = [ISitGood(1), ISitGood(2), ISitGood(3), ISitGood(35), ISitGood(135)];


Promise.all(datas)
  .then(res => {
    console.log(res);
  });

```

這個方法能夠確保全部的東西都讀完之後,才會繼續進行其他工作。
