理解Promise

Promise簡單學習 ，備忘

Promise用同步的寫法解決了異步回調金字塔的問題

如

getData1(data1 => {
  getData2(data1, data2 => {
    getData3(data2, data3 => {
      getData4(data3, data4 => {
        getData5(data4, data5 => {
          // 終於取到data5了
        })
      })
    })
  })
})

用Promise

getData1()
.then(getData2)
.then(getData3)
.then(getData4)
.then(getData5)
.then(data => {
  // 取到最終data了
})

基礎用法

let p = new Promise((resolve, reject) => {
  // 作一些事情
  // 而後在某些條件下resolve，或者reject
  if (/* 條件隨便寫^_^ */) {
    resolve()
  } else {
    reject()
  }
})

p.then(() => {
    // 若是p的狀態被resolve了，就進入這裏
}, () => {
    // 若是p的狀態被reject
})

1. new Promise能將一個異步過程轉化成promise對象。先有了promise對象，而後纔有promise編程方式。
2. .then用於爲promise對象的狀態註冊回調函數。它會返回一個promise對象，因此能夠進行鏈式調用，也就是.then後面能夠繼續.then。在註冊的狀態回調函數中，能夠經過return語句改變.then返回的promise對象的狀態，以及向後面.then註冊的狀態回調傳遞數據；也能夠不使用return語句，那樣默認就是將返回的promise對象resolve。
3. .catch用於註冊rejected狀態的回調函數，同時該回調也是程序出錯的回調，即若是前面的程序運行過程當中出錯，也會進入執行該回調函數。同.then同樣，也會返回新的promise對象。
4. 調用Promise.resolve會返回一個狀態爲fulfilled狀態的promise對象，參數會做爲數據傳遞給後面的狀態回調函數
5. Promise.reject與Promise.resolve同理，區別在於返回的promise對象狀態爲rejected

模擬紅綠燈

componentDidMount(){
        function red(){
            console.log("red");
        }
        function yellow(){
            console.log("yellow");
        }
        function green(){
            console.log("green");
        }
        
        let light = (fn,timer) => new Promise(resolve=>{
            setTimeout(function(){
                fn();
                resolve();
            },timer)
        })
        function start(){
            Promise.resolve().then(()=>{
                light(red,3000)
            }).then(()=>{
                light(yellow,5000)
            }).then(()=>{
                light(green,8000)
            })
        }
        start();
        
        

    }

我寫在react項目裏test 

記錄下來備忘。