javascript 承诺实现
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 承诺实现相关的知识,希望对你有一定的参考价值。
var PENDING = 'PENDING'
var FULFILLED = 'FULFILLED'
var REJECTED = 'REJECTED'
var i = 1
// 1. 构造函数Promise
function Promise(fn) {
this.id = i++;
// 2. 构造函数内初始状态Pending和value
this.status = PENDING; // 初始化状态
this.value = null;// 初始化值
this.deffered = []; // 下一个执行的Promise是谁,子Promise
// 3. 构造函数内调用函数(apply参数是数组,call参数是一个一个的,调用函数改变this的指向)
// resolve和reject的this都是当前的Promise对象。 使用bind方法不会立即执行函数,而是返回一个新的函数!!!
fn.call(this, this.resolve.bind(this), this.reject.bind(this) );
}
// 4. 结束回调函数,执行then Promise.prototype.then是函数
// 5.then函数内需要保存起结果或者失败的函数
Promise.prototype = {
constructor: Promise,
resolve: function (data) {
this.status = FULFILLED;
this.value = data;
//执行后续行为
this.done()
},
reject: function (err) {
this.status = REJECTED;
this.value = err;
//执行后续行为
this.done()
},
done: function () {
// 让这些this.deffered(子Promise执行)
this.deffered.forEach(task => this.handler(task));
},
handler: function (task) {
// 判断当前的执行的状态是咋样,调用对应的函数
var status = this.status;
var value = this.value;
var p ;
switch (status) {
case FULFILLED:
p = task.onfulfilled(value)
break;
case REJECTED:
p = task.onrejected(value)
break;
}
// 如果 p 是一个Promise的话,我们需要让他继续执行
// 把后续(task.promise)的deffer交给这个p
if(p && p.constructor === Promise){
// 是下一个promise
// 把下一个作为then链接的deffer移交p的deffered
p.deffered = task.promise.deffered;
}
},
then: function (onfulfilled, onrejected) {
// 保存该函数
var obj = {
onfulfilled: onfulfilled,
onrejected: onrejected
}
// 新来一个Promise 对象,让其存储这些
// 并且能根据不同的Promise去then
obj.promise = new this.constructor(function () {});
console.log(this); // 1
console.log(obj.promise); // 2
//保存接下来的子Promise
//建立一个与下一个Promise之间的关系
if(this.status == PENDING) this.deffered.push(obj)
// 保证不报错,未来不能return自己,需要换人
return obj.promise;
}
}
以上是关于javascript 承诺实现的主要内容,如果未能解决你的问题,请参考以下文章
javascript 使用承诺实现倒计时
在 JavaScript 中,如何在超时中包装承诺?
javascript 承诺所有运行所有承诺和处理程序错误
ES6新特性之 promise
类函数中的 Javascript ES6 承诺
JavaScript承诺 - 多个承诺失败时的逻辑