如何理解JavaScript中的Promise

如何理解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)}

· 這樣的異步代碼寫的就看起來像一個同步代碼了

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。