手写一个简单的promise方法
思路:
- 申明一个构造函数
- 在该构造函数中定义promise的三种状态,赋上初始值
- 在定义两个容器用来存储.then时候的状态
- 申明promise中的两个方法(resolve,reject)
- 写一个执行器
- 在构造函数的原型上定义.then的方法和.catch的方法
代码如下:
<script>
function myPrimise (excutor) {
let self = this
self.status = 'pending'
self.value = null
self.reason = null
self.onFulfilledCallback = []
self.onRejectedCallback = []
function resolve (value) {
if (self.status === 'pending') {
self.value = value
self.status = 'fulfilled'
self.onFulfilledCallback.forEach(item => item(value))
}
}
function reject (reason) {
if (self.status === 'pending') {
self.reason = 'reason'
self.status = 'rejected'
self.onRejectedCallback.forEach(item => item(reason))
}
}
try {
excutor (resolve, reject)
} catch (error) {
reject(error)
}
}
myPrimise.prototype.then = function (onFulfilled, onRejected) {
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function (data) {resolve(data)}
onRejected = typeof onRejected === 'function' ? onRejected : function (error) { throw error }
if (this.status === 'pending') {
this.onFulfilledCallback.push(onFulfilled)
this.onRejectedCallback.push(onRejected)
}
}
myPrimise.prototype.catch = function () {
this.then(null, fn)
}
let fn = new myPrimise((resolve, reject) => {
console.log('明天会更好');
setTimeout (() => {
try {
resolve('123')
} catch (error) {
reject(error.message)
}
}, 1000)
})
fn.then(res => console.log(res))
</script>