版本1：function函数
/**
* 函数名-Promise-[会覆盖原始的全局Promise]
* @constructor
*/
function Promise(executor) {
//声明属性
this.PromiseState = 'pending' //状态属性
this.PromiseResult = null //结果属性
this.callBacks = new Array() //存放then()中的回调函数
const self = this //获取this指针的引用
//声明:resolve
function resolve(data) {
//判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次]
if (self.PromiseState !== 'pending') return
// 1-修改状态{PromiseState}
self.PromiseState = 'resolved'
//2-设置对象结果值{PromiseResult}
self.PromiseResult = data
//异步执行：调用成功时对应的回调函数setTimeout(() => {
self.callBacks.forEach((item) => {
item.onResolved(data)
})
}, 0)
}//声明:reject
function reject(err) {
//判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次]
if (self.PromiseState !== 'pending') return
// 1-修改状态{PromiseState}
self.PromiseState = 'rejected'
//2-设置对象结果值{PromiseResult}
self.PromiseResult = err
//异步执行：调用失败时对应的回调函数
setTimeout(() => {
self.callBacks.forEach((item) => {
item.onRejected(err)
})
}, 0)
}//异常捕获
try {
//executor-执行器函数是同步调用的
executor(resolve, reject)
} catch (e) {
//修改promise对象状态为rejected
reject(e)
}
}//函数原型-挂载then()方法
Promise.prototype.then = function(onResolved, onRejected) {
let self = this //获取this指针
//判断回调函数参数
if (typeof onResolved !== 'function') {
onResolved = (value) => {
throw value
}
}
if (typeof onRejected !== 'function') {
onRejected = (reason) => {
throw reason
}
}
//返回结果
return new Promise((resolve, reject) => {
//公共函数块封装
function callback(_callMethod) {
try {
//获取回调函数的执行结果
let result = _callMethod(self.PromiseResult)
if (result instanceof Promise) {
//promise对象类型
result.then(
(data) => {
resolve(data)
},
(err) => {
reject(err)
}
)
} else {
//结果的对象状态为成功
resolve(result)
}
} catch (e) {
reject(e)
}
}
//根据状态PromiseState判断——调用回调函数
//成功resolved情况
if (this.PromiseState === 'resolved') {
//异步执行
setTimeout(() => {
callback(onResolved)
}, 0)
}
//失败rejected情况
if (this.PromiseState === 'rejected') {
setTimeout(() => {
callback(onRejected)
}, 0)
}
//未决定pending状态
if (this.PromiseState === 'pending') {
//todo:保存回调函数-//异步任务处理
this.callBacks.push({
onResolved: function() {
callback(onResolved)
},
onRejected: function() {
callback(onRejected)
},
})
}
})
}//函数原型-挂载catch()方法
Promise.prototype.catch = function(onRejected) {
return this.then(undefined, onRejected)
}//函数-挂载resolve()方法
Promise.resolve = function(value) {
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(
(v) => {
resolve(v)
},
(e) => {
reject(e)
}
)
} else {
resolve(value)
}
})
}//函数-挂载reject()方法
Promise.reject = function(value) {
return new Promise((resolve, reject) => {
reject(value)
})
}//函数-挂载all()方法
Promise.all = function(promises) {
return new Promise((resolve, reject) => {
let flag = 0 //标记值
let resultData = https://www.it610.com/article/new Array() //存放成功结果的数组
//判断参数数组中的promise的状态值
for (let i = 0;
i < promises.length;
i++) {
promises[i].then(
(data) => {
//执行第1个函数-状态成功
flag++
resultData[i] = data //通过下标赋值-保证元素的顺序
if (flag === promises.length) {
//修改状态
resolve(resultData)
}
},
(err) => {
//执行第2个函数-状态失败
reject(err)
}
)
}
})
}//函数-挂载race方法
Promise.race = function(promises) {
return new Promise((resolve, reject) => {
//遍历数组元素-[Promise的状态只能修改一次]
for (let i = 0;
i < promises.length;
i++) {
//判断状态值
promises[i].then(
(data) => {
//修改状态-成功
resolve(data)
},
(err) => {
//修改状态-失败
reject(err)
}
)
}
})
}
版本2：class类
class Promise {
//构造函数
constructor(executor) {
//声明属性
this.PromiseState = 'pending' //状态属性
this.PromiseResult = null //结果属性
this.callBacks = new Array() //存放then()中的回调函数
const self = this //获取this指针的引用
//声明:resolve
function resolve(data) {
//判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次]
if (self.PromiseState !== 'pending') return
// 1-修改状态{PromiseState}
self.PromiseState = 'resolved'
//2-设置对象结果值{PromiseResult}
self.PromiseResult = data
//异步执行：调用成功时对应的回调函数setTimeout(() => {
self.callBacks.forEach((item) => {
item.onResolved(data)
})
}, 0)
}//声明:reject
function reject(err) {
//判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次]
if (self.PromiseState !== 'pending') return
// 1-修改状态{PromiseState}
self.PromiseState = 'rejected'
//2-设置对象结果值{PromiseResult}
self.PromiseResult = err
//异步执行：调用失败时对应的回调函数
setTimeout(() => {
self.callBacks.forEach((item) => {
item.onRejected(err)
})
}, 0)
}//异常捕获
try {
//executor-执行器函数是同步调用的
executor(resolve, reject)
} catch (e) {
//修改promise对象状态为rejected
reject(e)
}
}//then方法
then(onResolved, onRejected) {
let self = this //获取this指针
//判断回调函数参数
if (typeof onResolved !== 'function') {
onResolved = (value) => {
throw value
}
}
if (typeof onRejected !== 'function') {
onRejected = (reason) => {
throw reason
}
}
//返回结果
return new Promise((resolve, reject) => {
//公共函数块封装
function callback(_callMethod) {
try {
//获取回调函数的执行结果
let result = _callMethod(self.PromiseResult)
if (result instanceof Promise) {
//promise对象类型
result.then(
(data) => {
resolve(data)
},
(err) => {
reject(err)
}
)
} else {
//结果的对象状态为成功
resolve(result)
}
} catch (e) {
reject(e)
}
}
//根据状态PromiseState判断——调用回调函数
//成功resolved情况
if (this.PromiseState === 'resolved') {
//异步执行
setTimeout(() => {
callback(onResolved)
}, 0)
}
//失败rejected情况
if (this.PromiseState === 'rejected') {
setTimeout(() => {
callback(onRejected)
}, 0)
}
//未决定pending状态
if (this.PromiseState === 'pending') {
//todo:保存回调函数-//异步任务处理
this.callBacks.push({
onResolved: function() {
callback(onResolved)
},
onRejected: function() {
callback(onRejected)
},
})
}
})
}//catch方法
catch (onRejected) {
return this.then(undefined, onRejected)
}//resolve方法-静态成员
static resolve(value) {
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(
(v) => {
resolve(v)
},
(e) => {
reject(e)
}
)
} else {
resolve(value)
}
})
}//reject
static reject(value) {
return new Promise((resolve, reject) => {
reject(value)
})
}//all
static all(promises) {
return new Promise((resolve, reject) => {
let flag = 0 //标记值
let resultData = https://www.it610.com/article/new Array() //存放成功结果的数组
//判断参数数组中的promise的状态值
for (let i = 0;
i < promises.length;
i++) {
promises[i].then(
(data) => {
//执行第1个函数-状态成功
flag++
resultData[i] = data //通过下标赋值-保证元素的顺序
if (flag === promises.length) {
//修改状态
resolve(resultData)
}
},
(err) => {
//执行第2个函数-状态失败
reject(err)
}
)
}
})
}//race
static race(promises) {
return new Promise((resolve, reject) => {
//遍历数组元素-[Promise的状态只能修改一次]
for (let i = 0;
i < promises.length;
i++) {
//判断状态值
promises[i].then(
(data) => {
//修改状态-成功
resolve(data)
},
(err) => {
//修改状态-失败
reject(err)
}
)
}
})
}
}
测试代码
- 锐客网
="text/javascript" src="https://www.it610.com/article/utils/promiseClass.js">
>
console.log(Promise.resolve(new Promise((resolve, reject) => {
resolve("SUCCESS");
})))console.log(Promise.resolve(Promise.resolve("ahikds")))console.log(Promise.reject("ahiksdla"))let p1 = new Promise((resolve, reject) => {
resolve("a");
})
let p2 = Promise.resolve("b")
let p3 = new Promise((resolve, reject) => {
resolve("c");
})console.log(Promise.all([p1, p2, p3]))console.log(Promise.race([p1, p2, p3]));
【前端|Promise实现】
文章图片
推荐阅读
- promise|promise和async+await
- 前端|Element-UI（el-table样式修改）
- JavaScript 自动获取所有a标签，并新标签打开
- JavaScript 获取当前周数
- JavaScript 时间戳格式化为日期或时间
- Vue.js|Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin
- react-redux|「源码解析」一文吃透react-redux源码（useMemo经典源码级案例）
- cesium实战|cesium 三维坐标系绘制
- 笔记|算法题JavaScript（回文数）