好程式設計師web前端培訓分享JavaScript學習筆記Promise

　　 好程式設計師web前端培訓分享JavaScript學習筆記Promise ， promise   是一個 ES6 的語法

　　 Promise 表示承諾的意思 ， 它在語法上解決了傳統的多層回撥巢狀問題

回撥函式

·  什麼是回撥函式？

·  就是把函式 A 當作引數傳遞到 函式 B 中

·  在函式 B 中以行參的方式進行呼叫

function   a(cb)   {

     cb()} function   b()   {

     console.log( '我是函式 b' )} a(b)

·  為什麼需要回撥函式

·  當我們執行一個非同步的行為的時候，我們需要在一個非同步行為執行完畢之後做一些事情

·  那麼，我們是沒有辦法提前預知這個非同步行為是什麼時候完成的

·  我們就只能以回撥函式的形式來進行

一個典型的定時器

setTimeout( function (){

     console.log( "回撥函式執行了" )},   2000 )

回撥地獄

·  當一個回撥函式巢狀一個回撥函式的時候

·  就會出現一個巢狀結構

·  當巢狀的多了就會出現回撥地獄的情況

·  比如我們傳送三個 ajax 請求

·  第一個正常傳送

·  第二個請求需要第一個請求的結果中的某一個值作為引數

·  第三個請求需要第二個請求的結果中的某一個值作為引數

ajax({

   url :   '我是第一個請求' ,

   success   (res)   {

     // 現在傳送第二個請求      ajax({

       url :   '我是第二個請求'，

       data :   {   a :   res.a,   b :   res.b   },

       success   (res2)   {

         // 進行第三個請求          ajax({

           url :   '我是第三個請求' ,

           data :   {   a :   res2.a,   b :   res2.b   },

   success   (res3)   {  

             console.log(res3)  

           }

         })

       }

     })

   }})

·  回撥地獄，其實就是回撥函式巢狀過多導致的

·  當程式碼成為這個結構以後，已經沒有維護的可能了

·  所以我們要把程式碼寫的更加的藝術一些

PROMISE

·  為了解決回撥地獄

·  我們就要使用 promise 語法

·  語法：

new   Promise ( function   (resolve,   reject)   {

     // resolve 表示成功的回撥      // reject 表示失敗的回撥 }).then( function   (res)   {

     // 成功的函式 }). catch ( function   (err)   {

     // 失敗的函式 })

·  promise 就是一個語法

·  我們的每一個非同步事件，在執行的時候

·  都會有三個狀態，執行中 / 成功 / 失敗

 

·  因為它包含了成功的回撥函式

·  所以我們就可以使用 promise 來解決多個 ajax 傳送的問題

new   Promise ( function   (resolve,   reject)   {

     ajax({

         url :   '第一個請求' ,

         success   (res)   {

             resolve(res)

         }

     })}).then( function   (res)   {

     // 準備傳送第二個請求      return   new   Promise ( function   (resolve,   reject)   {

         ajax({

             url :   '第二個請求' ,

             data :   {   a :   res.a,   b :   res.b   },

             success   (res)   {

                 resolve(res)

             }

         })

     })}).then( function   (res)   {

     ajax({

         url :   '第三個請求' ,

         data :   {   a :   res.a,   b :   res.b   },

         success   (res)   {

             console.log(res)

         }

     })})

·  這個時候，我們的程式碼已經改觀了很多了

·  基本已經可以維護了

·  但是對於一個程式設計師來說，這個樣子是不夠的

·  我們還需要更加的簡化程式碼

·  所以我們就需要用到一個 es7 的語法了

·  叫做 async/await

ASYNC/AWAIT

·  async/await  是一個 es7 的語法

·  這個語法是  回撥地獄的終極解決方案

·  語法：

async   function   fn()   {

     const   res   =   await   promise物件}

·  這個是一個特殊的函式方式

·  可以 await 一個 promise 物件

·  可以把非同步程式碼寫的看起來像同步程式碼

·  只要是一個 promiser 物件，那麼我們就可以使用  async/await  來書寫

async   function   fn()   {

   const   res   =   new   Promise ( function   (resolve,   reject)   {

     ajax({

         url :   '第一個地址' ,

         success   (res)   {

             resolve(res)

         }

     })

   })

 

   // res 就可以得到請求的結果    const   res2   =   new   Promise ( function   (resolve,   reject)   {

     ajax({

         url :   '第二個地址' ,

         data :   {   a :   res.a,   b :   res.b   },

         success   (res)   {

             resolve(res)

         }

     })

   })

 

   const   res3   =   new   Promise ( function   (resolve,   reject)   {

     ajax({

       url :   '第三個地址' ,

       data :   {   a :   res2.a,   b :   res2.b   },

       success   (res)   {

         resolve(res)

       }

     })

   })

 

   // res3 就是我們要的結果    console.log(res3)}

·  這樣的非同步程式碼寫的就看起來像一個同步程式碼了