1. 程式人生 > >ES6的Promise解決js的回撥地獄

ES6的Promise解決js的回撥地獄

  1. Promise是一個建構函式,new Promise()得到一個Promise的例項
  2. 在Promise中有兩個函式,resolve(成功之後的回撥函式)和reject(失敗後的回撥函式)
  3. 在Promise 建構函式的Prototype屬性上,有一個.then() 的方法,只要是Promise建構函式建立的例項,都可以訪問到.then()方法
  4. Promise表示一個非同步操作;每當我們new 一個Promise的是咧,這個例項就表示一個具體的非同步操作
  5. 既然Promise建立的例項是一個非同步操作,那麼這個非同步操作的結果只有兩種狀態:
  6. 非同步執行成功了,使用resolve返回
  7. 非同步執行失敗了,使用reject返回
  8. 由於Promise的例項是一個非同步操作,內部拿到的操作結果後,無法使用return把操作結果返回呼叫者,這時候非同步執行成功了,非同步執行失敗了,由於Promise的例項是一個非同步操作,內部拿到的操作結果後,無法使用return把操作結果返回呼叫者,這時候使用函式把結果返回給呼叫者。
  9. 我們可以在new 出來的Promise例項上,呼叫.then()方法,為這個Promise預先指定成功(resolve)和失敗(reject)回撥函式
  10. 如:
// 每當new一個Promise例項的時候,就會立即執行這個 非同步操作的程式碼
 var promise = new Promise(function(){
   fs.readFile('./2.txt','utf-8',(err,dataStr)=>{
      if(err)throw err
       console.log(dataStr)
  })
})
const fs = require('fs');

function getFIleByPath(fpath) {
    var promise = new Promise(function (resolve, reject) {
        fs.readFile(fpath, 'utf-8', (err, dataStr) => {
            if (err) return reject(err);
            resolve(dataStr);
        })

    })
    return promise;
}

getFIleByPath('./2.txt').then(function (data) {
    console.log("succ" + data)
}, function (err) {
    console.log(err + "err")
})

回撥地獄解決方案:

const fs = require('fs')

function getFileByPath(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {

      if (err) return reject(err)
      resolve(dataStr)

    })
  })
}

// 先讀取檔案1,在讀取2,最後讀取3
// 注意: 通過 .then 指定 回撥函式的時候,成功的 回撥函式,必須傳,但是,失敗的回撥,可以省略不傳
// 這是一個 錯誤的示範,千萬不要這麼用; 硬是把 法拉利,開成了 拖拉機;
/* getFileByPath('./files/1.txt')
  .then(function (data) {
    console.log(data)

    getFileByPath('./files/2.txt')
      .then(function (data) {
        console.log(data)

        getFileByPath('./files/3.txt')
          .then(function (data) {
            console.log(data)
          })
      })
  }) */

// 讀取檔案1
// 在上一個 .then 中,返回一個新的 promise 例項,可以繼續用下一個 .then 來處理

// 如果 ,前面的 Promise 執行失敗,我們不想讓後續的Promise 操作被終止,可以為 每個 promise 指定 失敗的回撥
/* getFileByPath('./files/11.txt')
  .then(function (data) {
    console.log(data)

    // 讀取檔案2
    return getFileByPath('./files/2.txt')
  }, function (err) {
    console.log('這是失敗的結果:' + err.message)
    // return 一個 新的 Promise
    return getFileByPath('./files/2.txt')
  })
  .then(function (data) {
    console.log(data)

    return getFileByPath('./files/3.txt')
  })
  .then(function (data) {
    console.log(data)
  }).then(function (data) {
    console.log(data)
  }) */

// console.log('OKOKOK')
// 當 我們有這樣的需求: 哪怕前面的 Promise 執行失敗了,但是,不要影響後續 promise 的正常執行,此時,我們可以單獨為 每個 promise,通過 .then 指定一下失敗的回撥;

// 有時候,我們有這樣的需求,個上面的需求剛好相反:如果 後續的Promise 執行,依賴於 前面 Promise 執行的結果,如果前面的失敗了,則後面的就沒有繼續執行下去的意義了,此時,我們想要實現,一旦有報錯,則立即終止所有 Promise的執行;

getFileByPath('./files/1.txt')
  .then(function (data) {
    console.log(data)

    // 讀取檔案2
    return getFileByPath('./files/22.txt')
  })
  .then(function (data) {
    console.log(data)

    return getFileByPath('./files/3.txt')
  })
  .then(function (data) {
    console.log(data)
  })
  .catch(function (err) { // catch 的作用: 如果前面有任何的 Promise 執行失敗,則立即終止所有 promise 的執行,並 馬上進入 catch 去處理 Promise中 丟擲的異常;
    console.log('這是自己的處理方式:' + err.message)
  })

在JQuery中也ajax中的應用:

$(function () {
      $('#btn').on('click', function () {
        $.ajax({
          url: './data.json',
          type: 'get',
          dataType: 'json'
        })
          .then(function (data) {
            console.log(data)
          })
      })
    });