原生JS实现promise
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<script type="text/javascript">
/**----手写promise start**/
function Xjz(excutor) {
Xjz.PENDING = 'pending';
Xjz.PULFILLED = 'pulfilled';
Xjz.REJECT = 'reject';
this.value = null;
this.status = Xjz.PENDING;
this.callbacks = [];
try {
excutor(this.resolve.bind(this), this.reject.bind(this))
} catch (err) {
this.reject(err)
}
}
Xjz.prototype.parse = function(data, res) {
data.then(function(res1) {
if (res1 instanceof Xjz) {
this.parse(res1, res)
} else {
res = res1
this.callbacks.forEach(function(item) {
item.onFulfilled(res)
})
}
}.bind(this))
}
Xjz.prototype.resolve = function(res) {
setTimeout(function() {
if (this.status === Xjz.PENDING) {
this.status = Xjz.PULFILLED
if (res instanceof Xjz) {
this.parse(res, this.value)
} else {
this.value = res
//console.log(this.value);
// var _that = this
this.callbacks.forEach(function(item) {
item.onFulfilled(res)
})
}
}
}.bind(this), 0)
}
Xjz.prototype.reject = function(err) {
setTimeout(function() {
if (this.status === Xjz.PENDING) {
this.status = Xjz.REJECT
this.value = err
var _that = this
this.callbacks.forEach(function(item) {
item.onReject(err)
})
}
}.bind(this), 0)
}
Xjz.prototype.then = function(onFulfilled, onReject) {
if (typeof onFulfilled != 'function') {
onFulfilled = function(res) {
return res
}
}
if (typeof onReject != 'function') {
onReject = function(err) {
return err
}
}
var mypro = new Xjz(function(resolve, reject) {
if (this.status === Xjz.PULFILLED) {
try {
var result = onFulfilled(this.value);
this.parsethen(mypro, result, resolve, reject)
} catch (err) {
reject(err)
}
}
if (this.status === Xjz.REJECT) {
try {
var result = onReject(this.value)
this.parsethen(mypro, result, resolve, reject)
} catch (err) {
reject(err)
}
}
if (this.status === Xjz.PENDING) {
this.callbacks.push({
onFulfilled: function(val) {
try {
var result = onFulfilled(val)
this.parsethen(mypro, result, resolve, reject)
} catch (err) {
reject(err)
}
}.bind(this),
onReject: function(val) {
try {
var result = onReject(val)
this.parsethen(mypro, result, resolve, reject)
} catch (err) {
reject(err)
}
}.bind(this)
})
}
}.bind(this))
return mypro
}
Xjz.prototype.parsethen = function(mypro, result, resolve, reject) {
if (mypro === result) {
throw new TypeError('返回值不能为自己本身')
}
if (result instanceof Xjz) {
result.then(resolve, reject)
} else {
resolve(result)
}
}
/**----手写promise end----**/
var p1 = new Xjz(
function(res, rej) {
setTimeout(
() => {
res(222)
}, 2000)
})
var p2 = p1.then(
function(res) {
console.log('-------手写promise测试-------');
console.log(res);
return p2
},
function(err) {
console.error(err);
})
p2.then(
function(res) {
console.log(res);
},
function(err) {
//console.error(err);
})
// .then().then((res) => {
// console.log('报错后是否执行并穿透传递参数', res);
// })
</script>
</body>
</html>
版权声明：本文为weixin_44158475原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。