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

1、概念

ES 6 開始支持 Promise。

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

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

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

2、executor

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

3、Promise 的狀態

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

3.1 setInterval 介紹

# 間隔多少毫秒就執行函數一次，循環執行# function 延時到的時候執行的函數# delay 延時，缺省0，立即執行 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 介紹

# 等待多少毫秒就執行函數一次，結束# function 延時到的時候執行的函數# delay 延時，缺省0，立即執行 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 狀態示例

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）

• 參數是 2 個函數，根據當前 Promise 對象 A 的狀態來調用不同的函數，fulfilled 走 onFulfilled 函數 F1， rejected 走 onRejected 函數 F2
• then 的返回值是一個 新的Promise對象B，執行任意一個回調函數，對這個 Promise 對象來說就是其返回值。調用任何一個函數后，其返回值可以被后續的 then 方法繼續捕捉（鏈式）
• 任何一個回調函數執行，其返回值 ret 被 resolve（ret），作為 B 的完成結果

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

• 為當前 Promise 對象 A 添加一個拒絕回調 F，返回一個 新的Promise對象B
• 如果 A 進行 fulfilled 狀態，則 A 的完成結果作為 B 的完成結果
• 如果 A 進入 rejected 狀態，回調 F 執行， 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) 返回 狀態為 fulfilled 的 Promise 對象
• Promise.reject(reason) 返回 狀態為 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)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。