摘要:通過構造函數,可以創建一個。函數本身是一個異步行為,其方法的第三個參數為一個回調函數,用來接收文件讀取的結果失敗時候的和成功時候的。第一個函數的參數對應的參數,第二個回調函數對應的參數。
一:Promise的概念
Promise的中文意思是‘承諾’,什么叫承諾?承諾就是現在沒有發生,在將來的某個時刻一定會發生的事情。
放在編程語言的環境下,Promise就是異步事件的結果的占位符。我們不用去管異步事件的結果什么時候來,只需要關心異步事件的結果產生的時候,你想要做什么就對了。
二:Promise的生命周期
異步事件不是立即執行程序,它的結果可能要在動作發生后一段時間才到,所以它有個生命周期。例如用電飯鍋煮米飯,從【米下鍋開始定時】到【定時結束】,這是煮米飯的生命周期。
一個Promise的生命周期主要有2個階段:
1: unsettled(pending) 處理過程中 -> 米飯定時開始到定時結束這段期間 2: settled (fulfilled或者rejected) 處理完 -> 米飯定時結束狀態
我們看到settled階段會出現兩個可能的狀態fulfilled或者rejected,它們分別是什么意思呢:
1: fulfilled Promise操作完成的結果為成功 -> 煮米飯水的比例合適,飯熟了,成功 2: rejected Promise操作完成的結果為失敗 -> 煮米飯水放少了,飯是夾生的,失敗
Promise內部的屬性PromiseState被用來表示Promise的3種狀態:pending,fulfilled 和 rejected。但是我們無法讀取到這三個狀態,而是通過Promise提供的接口方法來書寫對應的處理程序,后面會講到。
三:如何讓創建一個Promise
相信前面通過對比煮飯這個過程,你已經對Promise的概念和生命周期有了一定的體會,接下來我們就看看如何真正第創建一個Promise(如何煮米飯)。
聲明:因為Promise有未完成的Promise和已完成的Promise不同類型,本篇我們只討論未完成的Promise。已完成的Promise后面會講,目前來說你不必關心,就當世界上沒有這個東西。
通過Promise構造函數,可以創建一個Promise。構造函數只有一個參數:一個函數,我們叫它執行器(executor)函數。你可以理解為煮飯用的電飯煲。
既然執行器(executor)函數也是一個函數,那它也有參數。對,它有2個參數:
1: resolve() 執行器(executor)函數成功時的處理函數 2: reject() 執行器(executor)函數失敗時的處理函數
我們用一段代碼來解釋一下:
let executor = function (resolve, reject) {}; let promise = new Promise(executor);
通過上面的代碼示例,應該就能很清楚創建一個Promise的語法解構是怎樣的了。接下來我們用一個在Node.js中讀取文件的例子來演示:
let executor = function (resolve, reject) { let fs = require("fs"); fs.readFile("data.txt", {encoding: "utf8"}, function (error, content) { if (error) { reject(error); //在異步行為失敗時,調用reject()方法 return; } resolve(content); //在異步行為成功時,調用resolve()方法 }); }; let promise = new Promise(executor);
解釋一下上面的代碼:
1: 創建Promise,包裹異步程序
Promise本身并不執行任何真正的異步程序。我們只是把異步程序包裹在一個Promise里面,這樣做的目的其實是想把異步處理程序的結果給Promise,稍后再利用Promise提供的接口函數(then()或者catch())來對結果進行處理。
2: 我們在Promise的executor函數里調用真正的異步操作函數。
我們在executor函數里調用fs.readFile( )函數。fs.readFile( )函數本身是一個異步行為,其方法的第三個參數為一個回調函數,用來接收文件讀取的結果(失敗時候的error和成功時候的content)。
3: 把異步程序的結果給Promise
我們在fs.readFile( )的回調函數里,在文件讀取成功時調用resolve( )方法,失敗的時候調用reject( )方法,把成功或者失敗的結果通過2個函數的參數傳入,為Promise在fulfilled或者rejected兩種狀態時提供數據。
四:編寫Promise結果處理程序
前面我們已經了解到了怎么把一個異步處理事件包裹在一個Promise里面,并且通過resolve()和reject()把異步處理事件的結果傳遞的過程。終于來到了最后一步:使用結果數據(對比現實生活,你也可以理解為這一步叫做:驗證承諾)。
Promise提供2個方法來處理結果: Promise.prototype.then() 和 Promise.prototype.catch()。我們分別來看一下二者的功能:
1:Promise.prototype.then()
then()方法接收2個函數類行的參數:
1: 第一個參數為Promise在fulfilled狀態(成功狀態)時的回調方法 2: 第一個參數為Promise在rejected狀態(失敗狀態)時的回調方法
我們以之前的讀取文件為例子,看一下then()方法的使用:
let executor = function (resolve, reject) { let fs = require("fs"); fs.readFile("data.txt", {encoding: "utf8"}, function (error, content) { if (error) { reject(error); //在異步行為成功時,調用reject()方法 return; } resolve(content); //在異步行為失敗時,調用resolve()方法 }); }; let promise = new Promise(executor); //處理成功和失敗的情況 promise.then(function (content) { console.log(content); }, function (error) { console.log(error) });
這兩個回調函數的參數也就是之前異步處理的結果數據。第一個函數的參數對應resolve()的參數content,第二個回調函數對應reject()的參數error。這樣我們也就能在這2個回調函數里面拿到數據,從而根據你的業務需求編寫對應的結果處理程序。
需要說明的是,這兩個回調函數參數都不是必須的,并不強制要求你都要處理。下面的代碼里,列覺了某2種結果處理程序,語法上都是合法的。只是正常的需求下,我們一般還是需要對成功和失敗都要處理。
//只處理成功的情況 promise.then(function (content) { console.log(content); }); //只處理失敗的情況 promise.then(null, function (error) { console.log(error) });
2: Promise.prototype.catch()
catch()方法只有一個參數:一個只處理rejected狀態的回調函數。可能會有人疑問,then()已經可以同時處理2個狀態,為什么還需要catch()方法?
原因在于前面我們提到的,在then()方法里,并不強制要求你提供處理rejected的回調函數。Promise有個特性:如果你沒有添加rejected處理函數,那所有的失敗會被自動忽略。
可能會有些開發者只關心成功狀態,而忘了提供rejected處理函數,從而給整個程序埋下隱患,這樣會造成很不好的用戶體驗。而catch()方法就是一個明確地處理rejected的方法,而不像在then()里面,因為是非必須參數而讓人很容易忽略。
背景說了那么多,我們看看catch()怎么用:
promise.catch(function (error) { console.log(error) })
其實用法很簡單,它其實等價于是有reject處理函數的then():
promise.then(null, function (error) { console.log(error) });
沒有語法要求一個完整的Promise處理程序必須要有catch()方法。如果你沒有使用catch()的習慣,最好總是不要忘記在使用then()的時候添加reject處理函數。
或者,如果你偶爾會忘記在then()里添加reject處理函數,那么記得使用catch()來為你做最安全的保障。
以上,就是關于Promise的基本概念和使用。在平常的開發中,Promise的使用還是非常頻繁的,也很好用,所以我認為掌握Promise是一個必須的功課。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/106310.html
摘要:回調函數模式類似于事件模型,因為異步代碼也會在后面的一個時間點才執行如果回調過多,會陷入回調地獄基礎可以當做是一個占位符,表示異步操作的執行結果。函數可以返回一個,而不必訂閱一個事件或者向函數傳遞一個回調函數。 主要知識點:Promise生命周期、Promise基本操作、Promise鏈、響應多個Promise以及集成PromiseshowImg(https://segmentfaul...
摘要:為什么要異步編程我們在寫前端代碼時,經常會對做事件處理操作,比如點擊激活焦點失去焦點等再比如我們用請求數據,使用回調函數獲取返回值。這些都屬于異步編程。回調有多個狀態,當響應成功和失敗都有不同的回調函數。 為什么要異步編程 我們在寫前端代碼時,經常會對dom做事件處理操作,比如點擊、激活焦點、失去焦點等;再比如我們用ajax請求數據,使用回調函數獲取返回值。這些都屬于異步編程。 也許你...
摘要:為什么要異步編程我們在寫前端代碼時,經常會對做事件處理操作,比如點擊激活焦點失去焦點等再比如我們用請求數據,使用回調函數獲取返回值。這些都屬于異步編程。回調有多個狀態,當響應成功和失敗都有不同的回調函數。 為什么要異步編程 我們在寫前端代碼時,經常會對dom做事件處理操作,比如點擊、激活焦點、失去焦點等;再比如我們用ajax請求數據,使用回調函數獲取返回值。這些都屬于異步編程。 也許你...
摘要:面試題來源于網絡,看一下高級前端的面試題,可以知道自己和高級前端的差距。 面試題來源于網絡,看一下高級前端的面試題,可以知道自己和高級前端的差距。有些面試題會重復。 使用過的koa2中間件 koa-body原理 介紹自己寫過的中間件 有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理 如何和MySQL進行通信 React聲明周期及自己的理解 如何...
閱讀 2992·2023-04-26 00:23
閱讀 3406·2021-09-13 10:28
閱讀 2185·2021-08-31 14:18
閱讀 2891·2019-08-30 15:54
閱讀 1945·2019-08-30 15:43
閱讀 1284·2019-08-29 16:56
閱讀 2807·2019-08-29 14:16
閱讀 2060·2019-08-28 17:51