深入理解ES6 011【學習筆記】

Promise 與非同步程式設計

因為執行引擎是單執行緒的,所以需要追蹤即將執行的程式碼,那些程式碼被放在一個任務佇列中,每當一段程式碼準備執行時,都會被新增到任務佇列中,每當引擎中的一段程式碼結束執行,事件迴圈會執行佇列中的下一個任務。

Promise相當於非同步操作結果佔位符,它不會去訂閱一個事件,也不會傳遞一個回呼函式給目標函式,而是讓函式回傳一個 Promise,就像這樣

// readFile 承諾在未來的某個時刻完成
let promise = readFile('txx.txt')

Promise 的生命週期

  • pending
  • fulfilled 成功
  • rejected 程式錯誤或其他原因

[[PromiseState]]內部屬性被用來表示 Promise 的三種狀態,這個屬性不暴露於 Promise 物件上,所以不能以程式設計的方式偵測 Promise 的狀態,只有當 Promise 狀態改變時,透過 then() 方法來採取特定的行為。所以 Promise 都有 then 方法,它接受兩個參數,fulfilled 和 rejected 時的兩個回呼函式

如果一個物件實作了上述的 then 方法,那這個物件我們就稱之為 thenable 物件,所有的 Promise 物件都是 thenable 物件,但並非所有 thenable 物件都是 Promise。

let promise = readFile("example.txt");
promise.then(function(contents){
  // 完成
},function(err){
  // 拒絕
})
promise.then(function(contents){
  // 完成
})

promise.then(null,function(err){
  // 拒絕
})
// catch等同於上面這種
promise.catch(function(err){
  // 拒絕
})

如果向 Promise.resolve() 方法或 Promise.reject() 方法傳入一個 Promise,那麼這個 Promise 會被直接回傳

Node.js 環境的拒絕處理

  • unhandledRejection
  • rejectionHandled
let rejected;
process.on("unhandledRejection",function(reason,promise){
  console.log(reason.message); // "Explosin"
  console.log(rejected === promise); // "Explosin"
})
rejected = Promise.reject(new Error('Explosin'))

串聯 Promise 及鏈式回傳值

let p1 = new Promise(function(resolve,reject){
  resolve(42)
})
p1.then(function(value){
  console.log(value)
  return value+1;
})
.then(function(value){
  console.log(value); // "43"
})

let p1 = new Promise(function(resolve,reject){
  reject(42)
})
p1.catch(function(value){
  console.log(value) // 42
  return value+1;
})
.then(function(value){
  console.log(value); // "43"
})

在 Promise 鏈回傳 Promise

Promise.all()

只接受一個參數並回傳一個 Promise,該參數是一個含有多個受監測 Promise 的可迭代物件,只有當可迭代物件中所有 Promise 都被解決後,回傳的 Promise 才會被解決,只有當可迭代物件中所有 Promise 都完成後,回傳的 Promise 才會被完成。只要有一個 reject,就不用等所有的都完成就會被 reject。

let p1 = new Promise(function(resolve,reject){
  resolve(42)
})
let p2 = new Promise(function(resolve,reject){
  reject(43)
})
let p3 = new Promise(function(resolve,reject){
  resolve(44)
})
let p4 =  Promise.all([p1,p2,p3])
p4.catch(function(value){
  console.log(Array.isArray(value)); //false
  console.log(value); // 43
})

Promise.race()

只要有一個 resolve,不用等所有的都被完成。一旦陣列中的某個 Promise 被完成,Promise.race() 方法也會像 Promise.all() 方法一樣回傳一個特定的 Promise

Promise 繼承

class MyPromise extends Promise {
  // 使用預設的建構函式

  success(resolove,reject){
    return this.then(resolove,reject)
  }
  failure(reject){
    return this.catch(reject)
  }
}
let promise = new MyPromise(function(resolve,reject){
  resolve(42)
})
promise.success(function(value){
  console.log(value) // 42
})
.failure(function(value){
  console.log(value)
})

基於 Promise 的非同步任務執行

改造之前的文件讀取功能。只要每個非同步操作都回傳 Promise,就可以極大地簡化並能實用化這個過程。以 Promise 作為通用介面用於所有非同步程式碼可以簡化任務執行器。

let fs = require("fs");

function run(taskDef){
  // 建立迭代器
  let task = taskDef()

  // 開始執行任務
  let result = task.next();

  // 遞迴函式遍歷
  (function step(){
    // 如果有更多任務要做
    if(!result.done){
      // 用一個 Promise 來解決會簡化問題
      let promise = Promise.resolove(result.value);
      promise.then(function(value){
        result = task.next(value);
        step()
      })
      .catch(function(error){
        result = task.throw(error);
        step();
      })
    }

  }())
}
// 定義一個可用於任務執行器的函式
function readFile(filename){
  return new Promise(function(resolove,reject){
    fs.readFile(filename,function(err,contents){
      if(err){
        reject(err);
      } else {
        resolove(contents)
      }
    })
  })
}

// 執行一個任務
run(function *(){
  let contents = yield readFile("config.json");
  doSomethingWith(contents);
  console.log("Done")
})

主題測試文章,只做測試使用。發佈者:Walker,轉轉請注明出處:https://walker-learn.xyz/archives/4337

(0)
Walker的頭像Walker
上一篇 2025年11月25日 17:00
下一篇 2025年11月24日 00:00

相關推薦

  • Go工程師體系課 018【學習筆記】

    API 閘道與持續部署入門(Kong & Jenkins) 對應資料目錄《第 2 章 Jenkins 入門》《第 3 章 透過 Jenkins 部署服務》,整理 Kong 與 Jenkins 在企業級持續交付中的實戰路徑。即使零基礎,也能順著步驟建立出自己的閘道 + 持續部署管線。 課前導覽:什麼是 API 閘道 API 閘道位於用戶端與後端微服務…

    個人 2025年11月25日
    28600
  • 深入理解ES6 013【學習筆記】

    用模組封裝程式碼 JavaScript 使用「共享一切」的方式載入程式碼,這是該語言中最容易出錯且令人感到困惑的地方。其他語言使用諸如套件(package)之類的概念來定義程式碼作用域。在 ES6 以前,在應用程式的每一個 JavaScript 檔案中定義的一切都共享一個全域作用域。隨著網頁應用程式變得更加複雜,JavaScript 程式碼的使用量也開始增長,這種做法會引起問題,例如命名衝突和安全性問題。ES6 的一個目標是解決作用域問題…

    個人 2025年3月8日
    1.3K00
  • 深入理解ES6 008【學習筆記】

    迭代器(Iterator)和產生器(Generator)這項新特性對於高效的資料處理而言是不可或缺的,你也會發現在語言的其他特性中也都有迭代器的蹤影:新的 for-of 迴圈、展開運算子 (...)、甚至連非同步程式設計都可以使用迭代器。 迭代器是一種特殊的物件,它具有一些專門為迭代過程設計的專有介面,所有的迭代器物件都有一個 next() 方法,每次呼叫都傳回一個結果對…

    個人 2025年3月8日
    1.2K00
  • 深入理解ES6 006【學習筆記】

    Symbol 與 Symbol 屬性 第6種原始資料型別:Symbol。私有名稱原本是為了讓開發者們建立非字串屬性名稱而設計的,但是一般的技術無法偵測這些屬性的私有名稱 建立 Symbol let firstName = Symbol(); let person = {} person[firstName] = "Nicholas"; cons…

    個人 2025年3月8日
    1.4K00
  • Go 工程師體系課 014【學習筆記】

    rocketmq 快速入門 請參考我們的各種配置(podman)以瞭解安裝方式。概念介紹 RocketMQ 是阿里巴巴開源、Apache 頂級專案的分散式訊息中介軟體,核心元件: NameServer:服務發現與路由 Broker:訊息儲存、遞送、拉取 Producer:訊息生產者(傳送訊息) Consumer:訊息消費者(訂閱並消費訊息) Topic/Tag:主題/…

    個人 2025年11月25日
    28800
簡體中文 繁體中文 English