es6 --- 手写一个promise

一个promise实例:

var getJSON = function(url) {var promise = new Promise(function(resolve, reject) {// XHR对象发现ajax请求var client = new XMLHttpReqeust();client.open("GET", url);client.onreadystatechange = handler;client.responseType = "json";client.setRequestHeader("Accept", "application/json");client.send();function hanlder(){if (this.readyState !== 4) {return;}if (this.status === 200) {resolve(this.response);} else {reject(new Error(this.statusText));}};});return promise;
}
getJSON("/posts.json").then(function(json) {console.log("Content: " + json);
}, function(error) {console.error("出错了!', error);
});

上述在调用new Promise时,传递了一个函数function(resolve, reject),此函数在规范中被称为exector执行器.
所以,首先:需传入一个exector执行器:

function Promise(exector) {//...
}

确定Promise内部exector的作用:
可以看出原生的exector中传入了2个参数,resolve和reject.第一个代表成功,第二个代表失败.

function Promise(exector) {let self = this;this.value = undefined;this.reason = reason;// 执行成功function resolve(value) {self.value = value;}// 执行失败function reject(reason) {self.reason = reason;}exector(resolve, reject);
}

添加状态:
promise的执行过程是不可逆,因此需要一个status来记录其状态,初始时为padding,成功了为resolve,失败了为reject

function Promise(exector) {let self = this;this.status = "padding";this.value = value;this.reason = reason;// 成功function resolve(value) {if(self.status === "padding") {self.value = value;self.status = "resolved";}}// 失败function  reject(reason) {if(self.status === "padding") {self.reason = reason;self.status = "reject";}}// 对异常的处理try {exector(resolve, reject);} catch(e) {reject(e)}
}

原型上添加then方法:
注意到Promise实例的使用是p.then(onFulfilled, onRejected),可以在前面定义的Promise的原型上添加then方法.

Promise.prototype.then = function(onFulfilled, onRejected) {let self = this;if(this.status === "resolved") {onFulfilled(self.value);}if(this.status === "rejected") {onRejected(self.value);}
}

新增2个数组完成异步操作:
上面编写的Promise的调用是同步的,但一般都是异步使用Promise,故需在对Promise和其原型进行一定的修改.
如果异步,则处于padding状态,将回调函数fn保存在数组中!

function Promise(exector) {let self = this;this.status = "padding";this.value = undefined;this.reason = undefined;// 存储then中成功的回调函数this.onResolvedCallbacks = [];// 存储then中失败的回调函数this.onRejectedCallbacks = [];// 成功执行function resolve(value) {if(self.status === "padding") {self.value = value;self.status = "resolved";// 成功后遍历then中成功的所有回调函数self.onResolvedCallbacks.forEach(fn => fn());}}// 失败执行function reject(reason) {if(self.status === "padding") {self.reason = reason;self.status = "rejected";// 失败后遍历then中失败的所有回调函数self.onRejectedCallbacks.forEach(fn => fn());}}// 对异常进行处理try {exector(resolve, reject);} catch(e) {reject(e)}
}// Promise.prototype.then
Promise.prototype.then = function(onFulfilled, onRejected) {let self = this;// 成功if (this.status === "resolved") {onFulfilled(self.value);}// 失败if (this.status === "rejected") {onRejected(self.reason);}// paddingif (this.status === "padding") {// 推进onResolvedCallbacks数组this.onResolvedCallbacks.push( () => {onFulfilled(self.value);})this.onRejectedCallbacks.push( () => {onRejected(self.reason);})}
}

参考《ES6标准入门》(第3版) P276
参考 https://www.jianshu.com/p/4b126518c26d

es6 --- 手写一个promise相关推荐

手写一个promise用法_手写一个 Promise
1 js 的基本数据类型? 2 JavaScript 有几种类型的值? 3 什么是堆?什么是栈?它们之间有什么区别和联系? 4 内部属性 [Class] 是什么? 5 介绍 js 有哪些内置对象? 6 ...
Promise学习-手写一个promise
学习了Promise的A+规范,以及手写一个Promise后,我对Promise学到的结果. 平常也有用到过promise来处理异步,先回顾下promise的用法 new Promise((resol ...
教你如何手写一个Promise
想要源码的可以看这里,里面也有一些其他的知识想要手写一个promise,首先就要了解promise,想必大家都被过一些promise的面试题,知道一些promise的用法,主要考的就是一种异步编程的 ...
ES6 手写一个“辨色”小游戏
1. 前言依稀记得几年前朋友圈流行的辨色小游戏,找出颜色不同的矩形.前些天突发奇想,打算自己手写一个类似的游戏,话不多说,先上 Demo . --项目源码本实例基于 ES6 实现,并兼容 ie9及 ...
JavaScript 怎么自己手写一个Promise
认真看完这篇文章, 您可以自己封装一个简易但功能相对齐全的Promise, 还可以加深对Promise的理解建议 : 看这篇文章之前希望您了解ES6的语法 [ 阮一峰老师的ES6入门 ] 了解Pr ...
手写一个promise用法_手写一个自己的 JavaScript Promise 类库
终于有时间写这篇文章了, ES2015 推出了JS 的 Promise ,而在没有原生支持的时候,我们也可以使用诸如 Promises/A+ 的库的帮助,在我们的代码里实现Promise 的支持: 如 ...
手写一个promise用法_手写一个Promise
JS面向对象在JS中一切皆对象,但JS并不是一种真正的面向对象(OOP)的语言,因为它缺少类(class)的概念.虽然ES6引入了class和extends,使我们能够轻易地实现类和继承.但JS并不 ...
未能加载文件或程序集或它的某一个依赖项_手写一个miniwebpack
前言之前好友希望能介绍一下 webapck 相关的内容,所以最近花费了两个多月的准备,终于完成了 webapck 系列,它包括一下几部分: webapck 系列一:手写一个 JavaScript 打 ...
面试官：能不能手写一个 Promise？
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步.已进行4个月了,很多小伙伴表示收获颇丰. 以下问题你是不 ...

es6 --- 手写一个promise

es6 --- 手写一个promise相关推荐

最新文章

热门文章