<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
TEST PROMISE
<div>
<h1>promise 原理</h1>
<p>
Promise 是一个构造函数：
<ul>
<li>Promise：接受一个执行函数</li>
<li>执行函数里面两个形参：resolve,reject</li>
<li>
<p>Promise的原型上面有个then方法，这个方法接受两个参数（resolveCallback，rejectCallback）</p>
<p>并且把这个两个方法保存到promise的一个回调数组里面，当执行resolve的时候，根据status执行对应的回调方法</p>
<p>如果需要链式回调，则在then方法里面，返回一个新的promise对象，在回调数组里面保存resolveCallback，rejectCallback，和新的promise对象的resolve，reject方法</p>
<p>然后在resolve方法里面执行回调数组里面的resolve方法</p>
</li>
</ul>
</p>
</div>
</body>
<script>
function MyPromise(fn) {
var _this = this
_this.value = null; // resolve,reject的值
_this.status = 'Pending' // promise 的状态，Pending:初始，Fulfilled:resolve,Rejected:reject
_this.deffers = [] // 回调数组每调用一次then,就万里面push一个{onFullFilled:onFullFilled,onRejected:onRejected}
function resolve(val) {
if (_this.status === 'Pending') {
_this.status = 'Fulfilled'
_this.value = val
_this.deffers.forEach(function (item) {
var res;
var onFullFilled = item.cb
var resolve = item.resolve
onFullFilled && (res = onFullFilled(_this.value))
if (typeof res === 'object' && res.then) {
res.then(resolve)
}else {
resolve && resolve(res)
}
})
}
}
function reject(val) {
}
fn(resolve,reject)
}
MyPromise.prototype.then = function (onFullFilled,onRejected) {
var _this = this
return new MyPromise(function (resolve,reject) {
_this.deffers.push({
cb:onFullFilled,
resolve:resolve
})
})
}
var a = new MyPromise(function (reslove,reject) {
setTimeout(function () {
reslove('success')
reject('fail')
}, 1000);
})
a.then(function (res) {
console.log(res)
return (888)
}).then(function (res) {
console.log(9999)
})
</script>
</html>