参考 http://www.tuicool.com/articles/RzQRV3

  1. var PENDING = undefined,
  2. FULLFILLED = 1,
  3. REJECTED = 2;
  4. var Promise = function(resolver) {
  5. var promise = this;
  6. this.value;
  7. this.reason;
  8. this.status = PENDING;
  9. this.resolver;
  10. this.rejecter;
  11. var resolve = function(value) {
  12. promise.value = value;
  13. promise.status = FULLFILLED;
  14. if (promise.resolver || promise.rejecter) {
  15. var ret = promise.resolver.call(null, promise.value);
  16. if(ret instanceof Promise) {
  17. ret.then(promise.resolver_relsolve);
  18. } else {
  19. promise.resolver_relsolve(promise.value);
  20. }
  21. }
  22. }
  23. var reject = function(err) {
  24. promise.value = err;
  25. promise.status = REJECTED;
  26. if (promise.resolver || promise.rejecter) {
  27. var ret = promise.rejecter.call(null, promise.value);
  28. if(ret instanceof Promise) {
  29. ret.then(function(){}, promise.rejecter_reject);
  30. } else {
  31. promise.rejecter_reject(promise.value);
  32. }
  33. }
  34. }
  35. resolver(resolve, reject);
  36. }
  37. // Promise then 方法
  38. Promise.prototype.then = function(onFulfilled, onRejected) {
  39. var promise = this;
  40. if (promise.status == FULLFILLED) {
  41. var ret = onFulfilled(promise.value);
  42. if(ret instanceof Promise) {
  43. return ret;
  44. } else {
  45. return new Promise(function(resolve) {
  46. resolve(ret);
  47. });
  48. }
  49. } else if (promise.status == REJECTED) {
  50. var ret = onRejected(promise.value);
  51. if(ret instanceof Promise) {
  52. return ret;
  53. } else {
  54. return new Promise(function(resolve, reject) {
  55. reject(ret);
  56. });
  57. }
  58. }
  59. return new Promise(function(resolve, reject) {
  60. promise.resolver = onFulfilled;
  61. promise.resolver_relsolve = resolve;
  62. promise.rejecter = onRejected;
  63. promise.rejecter_reject = reject;
  64. });
  65. }

测试

  1. var p = new Promise(function(resolve, reject) {
  2. console.log('before');
  3. setTimeout(function() {
  4. resolve(10);
  5. }, 2000);
  6. });
  7. p.then(function() {
  8. console.log('after', arguments);
  9. }).then(function() {
  10. return new Promise(function(resolve, reject) {
  11. setTimeout(function() {
  12. resolve(20)
  13. }, 2000);
  14. });
  15. }).then(function() {
  16. console.log(arguments);
  17. });

输出

  1. // 两秒
  2. before
  3. after [10]
  4. // 两秒
  5. [20]

简单的 Promise 实现的更多相关文章

  1. 一个简单的Promise 实现

    用了这么长时间的promise,也看了很多关于promise 的文章博客,对promise 算是些了解.但是要更深的理解promise,最好的办法还是自己实现一个. 我大概清楚promise 是对异步 ...

  2. 实现简单的promise

    只考虑成功时的调用,方便理解一下promise的原理promise的例子: 1. 接下来一步步实现一个简单的promise step1:promise 接受一个函数作为构造函数的参数,是立即执行的,并 ...

  3. 如何用原生JS实现一个简单的promise

    我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力 我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧 先简单来说一下啥是promise吧 它是什么?Promise是一个 ...

  4. 简单版 Promise/A+,通过官方872个测试用例

    promise 标准 在实现 Promise 之前要清楚的是 JavaScript 中的 Promise 遵循了 Promises/A+ 规范,所以我们在编写 Promise 时也应当遵循这个规范,建 ...

  5. 聊一聊看似简单的Promise.prototype.then()方法

    Promise.prototype.then() Proise实例的then方法是定义在原型对象Promise.prototype上的,它的作用是为Promise实例添加状态改变时的回调函数. 该方法 ...

  6. 简单模拟 Promise

    class promise { constructor(fn) { this.data = null; this.err = null; this.isPromise = false; this.er ...

  7. [手写系列] 带你实现一个简单的Promise

    简介 学习之前 需要先对Promise有个基本了解哦,这里都默认大家都是比较熟悉Promise的 本次将带小伙伴们实现Promise的基本功能 Promise的基本骨架 Promise的then Pr ...

  8. 简单的 Promise 实现 一

    const Promise = function(fn){ let state = { pending: "pending", fulfilled: "fulfilled ...

  9. 手写简单的promise

    function Promise(fn) { var that = this; this.status = "pedding"; this.value = undefined; / ...

随机推荐

  1. (转) Deep Learning Research Review Week 2: Reinforcement Learning

      Deep Learning Research Review Week 2: Reinforcement Learning 转载自: https://adeshpande3.github.io/ad ...

  2. VS2010 中 Entity Framework 多数据库并存方法

    选中相应数据库生成的 *.edmx文件,然后在属性中找到“自定义工具命名空间”,为每个EF数据集设置不同的命名空间,这样每个数据库生成的代码就会被隔离在不同的命名空间,即使同名类型也就不会相互影响了.

  3. unity, reduce android size

    参考: https://www.youtube.com/watch?v=TYSmf_zgtZo http://stackoverflow.com/questions/41087220/how-to-u ...

  4. React组件生命周期过程说明

    来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...

  5. ecstore-app接口

    接口调用方式: 接口完整地址为:http://域名/index.php/wapapp/请求地址 比如获取商品信息就是 http://域名/index.php/wapapp/product.html 提 ...

  6. python3.5学习笔记--一个简单的图片爬虫

    参考资料:http://v.qq.com/boke/page/q/g/t/q01713cvdgt.html 目的:爬取网站图片 实际上以上链接的视频中已经将整个过程说的非常明白了,稍微有点计算机基础的 ...

  7. jquery深拷贝和浅拷贝

    var obj1 = { a: 1 };var obj2 = { b: {bbb: 2} };function Clone(){//浅拷贝 拷贝到obj1值会被改变 在一个栈中 $.extend(ob ...

  8. gcc警告: warning: dereferencing type-punned pointer will break strict-aliasing rules

    Q: 在高优化级别下,不同类型指针之间的强制类型转换可能会触发以下警告: warning: dereferencing type-punned pointer will break strict-al ...

  9. Displaying Bitmaps Efficiently 显示图片相关

    http://developer.android.com/training/displaying-bitmaps/index.html .手机内存资源有限 .Bitmap占用的内存大 .App有时需要 ...

  10. 公司系统的license授权

    在我的电脑的myeclipse的whnaproject项目下.可直接编译生成license.xml中所需要的授权码. 引用了spring-license-0.02.jar. package com.w ...