摘要:回調函數模式類似于事件模型,因為異步代碼也會在后面的一個時間點才執行如果回調過多,會陷入回調地獄基礎可以當做是一個占位符,表示異步操作的執行結果。函數可以返回一個,而不必訂閱一個事件或者向函數傳遞一個回調函數。
主要知識點:Promise生命周期、Promise基本操作、Promise鏈、響應多個Promise以及集成Promise異步編程
《深入理解ES6》筆記 目錄
JavaScript引擎中,只有一個主線程,當執行JavaScript代碼塊時,不允許其他代碼塊執行,而事件機制和回調機制的代碼塊會被添加到任務隊列(或者叫做堆棧)中,當符合某個觸發回調或者事件的時候,就會執行該事件或者回調函數。
事件模型瀏覽器初次渲染DOM的時候,我們會給一些DOM綁定事件函數,只有當觸發了這些DOM事件函數,才會執行他們:
let button = document.getElementById("my-btn"); button.onclick = function(event) { console.log("Clicked"); };回調模式
當 Node.js 被創建時,它通過普及回調函數編程模式提升了異步編程模型。回調函數模式類似于事件模型,因為異步代碼也會在后面的一個時間點才執行:
readFile("example.txt", function(err, contents) { if (err) { throw err; } console.log(contents); }); console.log("Hi!");
如果回調過多,會陷入回調地獄;
Promise 基礎Promise可以當做是一個占位符,表示異步操作的執行結果。函數可以返回一個Promise,而不必訂閱一個事件或者向函數傳遞一個回調函數。
// readFile 承諾會在將來某個時間點完成 let promise = readFile("example.txt");
在此代碼中, readFile() 實際上并未立即開始讀取文件,這將會在稍后發生。此函數反而會返回一個 Promise 對象以表示異步讀取操作,因此你可以在將來再操作它。
Promise 的生命周期Promise的生命周期:進行中(pending),已經完成(fulfilled),拒絕(rejected)
每個 Promise 都會經歷一個短暫的生命周期,初始為掛起狀態(pending state) ,這表示異步操作尚未結束。一個掛起的 Promise 也被認為是未決的(unsettled )。一旦異步操作結束, Promise就會被認為是已決的(settled ) ,并進入兩種可能狀態之一:
已完成(fulfilled ) : Promise 的異步操作已成功結束;
已拒絕(rejected ) : Promise 的異步操作未成功結束,可能是一個錯誤,或由其他原因導致。
內部的[[PromiseState]] 屬性會被設置為"pending" 、 "fulfilled" 或 "rejected",以反映Promise的狀態。該屬性并未在 Promise 對象上被暴露出來,因此你無法以編程方式判斷 Promise 到底處于哪種狀態。不過你可以使用then()方法在 Promise 的狀態改變時執行一些特定操作。
then()
then() 方法在所有的 Promise 上都存在,并且接受兩個參數。第一個參數是 Promise 被完成時要調用的函數,與異步操作關聯的任何附加數據都會被傳入這個完成函數。第二個參數則是 Promise 被拒絕時要調用的函數:
let promise = readFile("example.txt"); promise.then(function(contents) { // 完成 console.log(contents); }, function(err) { // 拒絕 console.error(err.message); }); promise.then(function(contents) { // 完成 console.log(contents); }); promise.then(null, function(err) { // 拒絕 console.error(err.message); });
catch() 方法
其行為等同于只傳遞拒絕處理函數給 then()
promise.catch(function(err) { // 拒絕 console.error(err.message); }); // 等同于: promise.then(null, function(err) { // 拒絕 console.error(err.message); });創建未決的 Promise
Promise 使用 Promise 構造器來創建:
// Node.js 范例 let fs = require("fs"); function readFile(filename) { return new Promise(function(resolve, reject) { // 觸發異步操作 fs.readFile(filename, { encoding: "utf8" }, function(err, contents) { // 檢查錯誤 if (err) { reject(err); return; } // 讀取成功 resolve(contents); }); }); } let promise = readFile("example.txt"); // 同時監聽完成與拒絕 promise.then(function(contents) { // 完成 console.log(contents); }, function(err) { // 拒絕 console.error(err.message); });
romise構造函數接受一個函數作為參數,該函數的兩個參數分別是resolve和reject。它們是兩個函數,由 JavaScript 引擎提供,不用自己部署。
執行器會在 readFile() 被調用時立即運行
let promise = new Promise(function(resolve, reject) { console.log("Promise"); resolve(); }); console.log("Hi!"); //輸出結果 Promise Hi!創建已決的 Promise Promise.resolve()
Promise.resolve()方法接收一個參數,并會返回一個處于已完成狀態的 Promise ,在then()方法中使用完成處理函數才能提取該完成態的Promise傳遞的值,例如:
let promise = Promise.resolve(42); promise.then(function(value) { console.log(value); // 42 });Promise.reject()
可以使用Promise.reject()方法來創建一個已拒絕狀態的Promise,同樣只有在拒絕處理函數中或者catch()方法中才能接受reject()方法傳遞的值:
let promise = Promise.reject(42); promise.catch(function(value) { console.log(value); // 42 });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/97025.html
摘要:最近買了深入理解的書籍來看,為什么學習這么久還要買這本書呢主要是看到核心團隊成員及的創造者為本書做了序,作為一個粉絲,還是挺看好這本書能給我帶來一個新的升華,而且本書的作者也非常厲害。 使用ES6開發已經有1年多了,以前看的是阮一峰老師的ES6教程,也看過MDN文檔的ES6語法介紹。 最近買了《深入理解ES6》的書籍來看,為什么學習ES6這么久還要買這本書呢?主要是看到Daniel A...
摘要:異步編程是每個使用編程的人都會遇到的問題,無論是前端的請求,或是的各種異步。本文就來總結一下常見的四種處理異步編程的方法。利用一種鏈式調用的方法來組織異步代碼,可以將原來以回調函數形式調用的代碼改為鏈式調用。 異步編程是每個使用 JavaScript 編程的人都會遇到的問題,無論是前端的 ajax 請求,或是 node 的各種異步 API。本文就來總結一下常見的四種處理異步編程的方法。...
摘要:為什么要異步編程我們在寫前端代碼時,經常會對做事件處理操作,比如點擊激活焦點失去焦點等再比如我們用請求數據,使用回調函數獲取返回值。這些都屬于異步編程。回調有多個狀態,當響應成功和失敗都有不同的回調函數。 為什么要異步編程 我們在寫前端代碼時,經常會對dom做事件處理操作,比如點擊、激活焦點、失去焦點等;再比如我們用ajax請求數據,使用回調函數獲取返回值。這些都屬于異步編程。 也許你...
閱讀 3108·2021-09-22 15:54
閱讀 3996·2021-09-09 11:34
閱讀 1778·2019-08-30 12:48
閱讀 1169·2019-08-30 11:18
閱讀 3439·2019-08-26 11:48
閱讀 923·2019-08-23 17:50
閱讀 2125·2019-08-23 17:17
閱讀 1250·2019-08-23 17:12