網站首頁 編程語言 正文
有關promise的實現,首先需要了解promise是如何使用的,需要對promise的調用關系很熟悉。
第一版,實現了then方法,以及resolve,reject等,關于promise 內部狀態的改變,拋出異常后的處理,以及鏈式調用then方法的處理方式。
/*
* @Author: 毛毛
* @Date: 2022-01-02 15:00:12
* @Last Modified by: 毛毛
* @Last Modified time: 2022-01-02 15:09:44
*/
/**
*
* 手寫promise
* @class MaoPromise
*/
class MaoPromise {
/**
* 正在執行的狀態
*
* @static
* @memberof MaoPromise
*/
static _PROMISE_STATUS_PENDING = "pending";
/**
* 成功執行的狀態
*
* @static
* @memberof MaoPromise
*/
static _PROMISE_STATUS_FULFILLED = "fulfilled";
/**
* 失敗執行的狀態
*
* @static
* @memberof MaoPromise
*/
static _PROMISE_STATUS_REJECTED = "rejected";
/**
* 默認的狀態 執行中
*
* @memberof MaoPromise
*/
_status = MaoPromise._PROMISE_STATUS_PENDING;
/**
* 成功執行時 傳給 resolve函數的參數
*
* @memberof MaoPromise
*/
_value = undefined;
/**
* 失敗執行時 傳給 reject函數的參數
*
* @memberof MaoPromise
*/
_reason = undefined;
/**
* 成功執行的回調函數
*
* @memberof MaoPromise
*/
_onFulfilledCallback = [];
/**
* 失敗執行的回調函數
*
* @memberof MaoPromise
*/
_onRejectedCallback = [];
/**
* Creates an instance of MaoPromise.
* @param {Function} executor 執行器
* @memberof MaoPromise
*/
constructor(executor) {
try {
executor(this.resolve, this.reject);
} catch (err) {
this.reject(err);
}
}
/**
* 成功時執行
*
* @param {*} value
* @memberof MaoPromise
*/
resolve = (value) => {
if (this._status === MaoPromise._PROMISE_STATUS_PENDING) {
// 延遲執行 queueMicrotask函數 將回調函數的內容加入到微任務中執行
queueMicrotask(() => {
if (this._status !== MaoPromise._PROMISE_STATUS_PENDING) return;
this._value = value;
this._status = MaoPromise._PROMISE_STATUS_FULFILLED;
// 執行成功回調
this._onFulfilledCallback.forEach(callback => {
callback(this._value);
});
});
}
}
/**
* 失敗時執行
*
* @param {*} reason
* @memberof MaoPromise
*/
reject = (reason) => {
if (this._status === MaoPromise._PROMISE_STATUS_PENDING) {
queueMicrotask(() => {
if (this._status !== MaoPromise._PROMISE_STATUS_PENDING) return;
this._reason = reason;
this._status = MaoPromise._PROMISE_STATUS_REJECTED;
// 執行失敗回調
this._onRejectedCallback.forEach(callback => {
callback(this._reason);
});
});
}
}
/**
* then方法
*
* @param {*} onFulfilled 成功回調
* @param {*} onRejected 失敗回調
* @memberof MaoPromise
*/
then(onFulfilled, onRejected) {
return new MaoPromise((resolve, reject) => {
// TODO 執行then函數的時候,狀態已經確定了,則直接執行成功回調函數
if (this._status === MaoPromise._PROMISE_STATUS_FULFILLED) {
if (typeof onFulfilled === "function") {
this._executorFunctionWithCatchError(onFulfilled, this._value, resolve, reject);
}
}
else if (this._status === MaoPromise._PROMISE_STATUS_REJECTED) {
if (typeof onRejected === "function") {
this._executorFunctionWithCatchError(onRejected, this._reason, resolve, reject);
}
}
// TODO 副作用函數的返回值 作為then函數返回值promise的(resolve,reject)的參數
// 狀態還沒確定之前 搜集副作用 在狀態改變之后 一起執行
if (typeof onFulfilled === "function")
// 為了收集到副作用執行后的返回值 我們將副作用函數放到新的函數中 然后加入到副作用數組中
this._onFulfilledCallback.push(() => {
this._executorFunctionWithCatchError(onFulfilled, this._value, resolve, reject);
});
if (typeof onRejected === "function")
this._onRejectedCallback.push(() => {
this._executorFunctionWithCatchError(onRejected, this._reason, resolve, reject);
});
});
}
/**
* 執行副作用函數 進行異常的捕獲處理
*
* @param {*} execFn 副作用函數
* @param {*} value 上一個回調函數(resolve,reject)執行時傳入的參數
* @param {*} resolve 成功回調
* @param {*} reject 失敗回調
* @memberof MaoPromise
*/
_executorFunctionWithCatchError(execFn, value, resolve, reject) {
try {
const res = execFn(value);
resolve(res);
} catch (err) {
reject(err);
}
}
}
const promise = new MaoPromise((resolve, reject) => {
resolve("111");
// resolve("1121");
// throw new Error("222");
});
promise.then((res) => {
console.log(res);
return "asa";
}, err => {
console.log(err.message);
}).then(res => {
console.log(res);
})
原文鏈接:https://blog.csdn.net/weixin_45747310/article/details/122276731
相關推薦
- 2022-04-06 Python的type函數結果你知道嘛_python
- 2022-06-19 Rainbond云原生部署SpringCloud應用架構實踐_云其它
- 2022-06-09 Python字符串的索引與切片_python
- 2022-03-29 C#算法之各位相加_C#教程
- 2022-03-26 Flutter構建自定義Widgets的全過程記錄_Android
- 2024-04-06 jeecg-boot使用QueryGenerator.initQueryWrapper怎么排序查詢
- 2023-10-15 el-popover彈窗修改三角樣式或者位置
- 2022-10-02 React在組件中如何監聽redux中state狀態的改變_React
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支