@[TOC](JS 的 Promise詳解)歐諾個魚

1、概念

ES 6 開始支持 Promise。

Promise 對象用于一個異步操作的最終完成（包括成功和失敗）及結(jié)果值的表示。簡而言之，就是處理異步請求的。

之所以叫做 Promise，就是承諾做這件事，如果成功則怎么處理，失敗則怎么處理。

// 語法 new Promise(// 下面定義的函數(shù)是 executor function(resolve, reject) {...} )

2、executor

• executor 是一個帶有 resolve 和 reject 兩個參數(shù)的函數(shù)
• executor 函數(shù)在 Promise 構(gòu)造函數(shù)執(zhí)行時立即執(zhí)行，被傳遞 resolve 和 reject 函數(shù)（executor 函數(shù)在 Promise 構(gòu)造函數(shù)返回新建對象前被調(diào)用）
• executor 內(nèi)部通常會執(zhí)行一些異步操作，一旦完成，可以調(diào)用 resolve 函數(shù)來將 Promise 狀態(tài)改成 fulfilled （即完成），或者在發(fā)生錯誤時將它的狀態(tài)改為 rejected （即失敗）
• 如果在 executor 函數(shù)中拋出一個錯誤，那么該 Promise 狀態(tài)為 rejected 。executor 函數(shù)的返回值被忽略
• executor 中，reslove 或 reject 只能執(zhí)行其中一個函數(shù)

3、Promise 的狀態(tài)

• pending： 初始狀態(tài)，不是成功或失敗狀態(tài)
• fulfilled： 意味著操作成功完成
• rejected： 意味著操作失敗

3.1 setInterval 介紹

# 間隔多少毫秒就執(zhí)行函數(shù)一次，循環(huán)執(zhí)行# function 延時到的時候執(zhí)行的函數(shù)# delay 延時，缺省0，立即執(zhí)行 setInterval(function[,delay]); setInterval(() => {console.log('I am working!') }, 1000) Info: Start process (上午10:26:11) I am working! I am working! I am working! Process canceled // F9 Info: End process (上午10:26:19)

3.2 setTimeout 介紹

# 等待多少毫秒就執(zhí)行函數(shù)一次，結(jié)束# function 延時到的時候執(zhí)行的函數(shù)# delay 延時，缺省0，立即執(zhí)行 setTimeout(function[,delay]); setTimeout(() => {console.log('I am working!') }, 2000) Info: Start process (上午10:38:25) I am working! Info: End process (上午10:38:28)

3.3 Promise 狀態(tài)示例

var myPromise = new Promise(function(resolve, reject){console.log(1, 'Do sth.')setTimeout(() => {console.log(2, '========');resolve('Ok.');}, 3000); })console.log(3, myPromise)setInterval(() => {console.log(4, myPromise, '++++++++') }, 1000) Info: Start process (上午10:48:49) 1 'Do sth.' 3 Promise { <pending> } 4 Promise { <pending> } '++++++++' 4 Promise { <pending> } '++++++++' 2 '========' 4 Promise { 'Ok.' } '++++++++' 4 Promise { 'Ok.' } '++++++++' Process canceled Info: End process (上午10:48:59)

4、Promise.then（onFulfilled, onRejected）

• 參數(shù)是 2 個函數(shù)，根據(jù)當(dāng)前 Promise 對象 A 的狀態(tài)來調(diào)用不同的函數(shù)，fulfilled 走 onFulfilled 函數(shù) F1， rejected 走 onRejected 函數(shù) F2
• then 的返回值是一個 新的Promise對象B，執(zhí)行任意一個回調(diào)函數(shù)，對這個 Promise 對象來說就是其返回值。調(diào)用任何一個函數(shù)后，其返回值可以被后續(xù)的 then 方法繼續(xù)捕捉（鏈?zhǔn)?#xff09;
• 任何一個回調(diào)函數(shù)執(zhí)行，其返回值 ret 被 resolve（ret），作為 B 的完成結(jié)果

var myPromise = new Promise(function(resolve, reject){console.log(1, 'Do sth.')setTimeout(() => {console.log(2, '========');resolve('Ok.');}, 3000); })console.log(3, myPromise)setInterval(() => {console.log(4, myPromise, '++++++++') }, 1000)let pro1 = myPromise.then(value => {console.log(5, 'Successful.');return 11111;},reason => {console.log(6, 'Failed.')return 22222;} )setInterval(() => {console.log(7, pro1, '@@@@@') }, 1000) Info: Start process (上午11:02:43) 1 'Do sth.' 3 Promise { <pending> } 4 Promise { <pending> } '++++++++' 7 Promise { <pending> } '@@@@@' 4 Promise { <pending> } '++++++++' 7 Promise { <pending> } '@@@@@' 2 '========' 5 'Successful.' 4 Promise { 'Ok.' } '++++++++' 7 Promise { 11111 } '@@@@@' 4 Promise { 'Ok.' } '++++++++' 7 Promise { 11111 } '@@@@@' Process canceled Info: End process (上午11:02:53)

5、Promise.catch

• 為當(dāng)前 Promise 對象 A 添加一個拒絕回調(diào) F，返回一個 新的Promise對象B
• 如果 A 進行 fulfilled 狀態(tài)，則 A 的完成結(jié)果作為 B 的完成結(jié)果
• 如果 A 進入 rejected 狀態(tài)，回調(diào) F 執(zhí)行， F 的返回值 ret 來 resolve(ret)

5.1 示例 1

var myPromise = new Promise(function(resolve, reject){console.log(1, 'Do sth.')setTimeout(() => {console.log(2, '========');resolve('Ok.');}, 3000); })console.log(3, myPromise)setInterval(() => {console.log(4, myPromise, '++++++++') }, 1000)let pro1 = myPromise.catch(reason => {console.log(5, reason, '&&&&&&&&')return 22222;} )setInterval(() => {console.log(6, pro1, '@@@@@') }, 1000) Info: Start process (上午11:07:53) 1 'Do sth.' 3 Promise { <pending> } 4 Promise { <pending> } '++++++++' 7 Promise { <pending> } '@@@@@' 4 Promise { <pending> } '++++++++' 7 Promise { <pending> } '@@@@@' 2 '========' 4 Promise { 'Ok.' } '++++++++' 7 Promise { 'Ok.' } '@@@@@' 4 Promise { 'Ok.' } '++++++++' 7 Promise { 'Ok.' } '@@@@@' 4 Promise { 'Ok.' } '++++++++' 7 Promise { 'Ok.' } '@@@@@' 4 Promise { 'Ok.' } '++++++++' 7 Promise { 'Ok.' } '@@@@@' 4 Promise { 'Ok.' } '++++++++' 7 Promise { 'Ok.' } '@@@@@' Process canceled Info: End process (上午11:08:00)

5.2 示例 2

var myPromise = new Promise(function(resolve, reject){console.log(1, 'Do sth.')setTimeout(() => {console.log(2, '========');reject('Not Ok.');}, 3000); })console.log(3, myPromise)setInterval(() => {console.log(4, myPromise, '++++++++') }, 1000)let pro1 = myPromise.catch(reason => {console.log(5, reason, '&&&&&&&&')return 22222;} )setInterval(() => {console.log(6, pro1, '@@@@@') }, 1000) Info: Start process (上午11:12:49) 1 'Do sth.' 3 Promise { <pending> } 4 Promise { <pending> } '++++++++' 6 Promise { <pending> } '@@@@@' 4 Promise { <pending> } '++++++++' 6 Promise { <pending> } '@@@@@' 2 '========' 5 'Not Ok.' '&&&&&&&&' 4 Promise { <rejected> 'Not Ok.' } '++++++++' 6 Promise { 22222 } '@@@@@' 4 Promise { <rejected> 'Not Ok.' } '++++++++' 6 Promise { 22222 } '@@@@@' 4 Promise { <rejected> 'Not Ok.' } '++++++++' 6 Promise { 22222 } '@@@@@' 4 Promise { <rejected> 'Not Ok.' } '++++++++' 6 Promise { 22222 } '@@@@@' 4 Promise { <rejected> 'Not Ok.' } '++++++++' 6 Promise { 22222 } '@@@@@' Process canceled Info: End process (上午11:12:57)

6、Promise 的 兩個方法

• Promise.resolve(value) 返回 狀態(tài)為 fulfilled 的 Promise 對象
• Promise.reject(reason) 返回 狀態(tài)為 rejected 的 Promise 對象

6.1 示例 1

function runAsync() {return new Promise (function(resolve, reject){setTimeout(function(){console.log('Do Sth...');resolve('OK...')// reject('NOT OK...');}, 3000);}); }runAsync().then(value => {console.log(1, value);return Promise.reject(value + '*===*');},reason => {console.log(2, reason);return Promise.resolve(reason + '===');} ).catch(reason => {console.log(3, reason);return Promise.resolve(reason + '*===*');} ).then(reason => {console.log(4,reason);console.log(5, 'Reason + Promise END')return Promise.resolve(reason + "===");},value => {console.log(6, value);console.log(7, 'Value + Promise END');} )console.log(8, "===== FIN =====") Info: Start process (上午12:25:25) 8 '===== FIN =====' Do Sth... 1 'OK...' 3 'OK...*===*' 4 'OK...*===**===*' 5 'Reason + Promise END' Info: End process (上午12:25:28)

6.2 示例 2

function runAsync() {return new Promise (function(resolve, reject){setTimeout(function(){console.log('Do Sth...');// resolve('OK...')reject('NOT OK...');}, 3000);}); }runAsync().then(value => {console.log(1, value);return Promise.reject(value + '*===*');},reason => {console.log(2, reason);return Promise.resolve(reason + '===');} ).catch(reason => {console.log(3, reason);return Promise.resolve(reason + '*===*');} ).then(reason => {console.log(4,reason);console.log(5, 'Reason + Promise END')return Promise.resolve(reason + "===");},value => {console.log(6, value);console.log(7, 'Value + Promise END');} )console.log(8, "===== FIN =====") Info: Start process (上午12:25:56) 8 '===== FIN =====' Do Sth... 2 'NOT OK...' 4 'NOT OK...===' 5 'Reason + Promise END' Info: End process (上午12:25:59)

總結(jié)

以上是生活随笔為你收集整理的JS 的 Promise详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。