码迷,mamicode.com
首页 > 其他好文 > 详细

promise 原理

时间:2018-06-01 14:30:32      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:rom   new   cal   []   fail   item   out   构造函数   var   

<!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>

promise 原理

标签:rom   new   cal   []   fail   item   out   构造函数   var   

原文地址:https://www.cnblogs.com/liangshuang/p/9121309.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!