promise的简单实现（上）

最新推荐文章于 2024-07-28 21:06:01 发布
最新推荐文章于 2024-07-28 21:06:01 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： 笔记随笔 文章标签： promise
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/emily_cd/article/details/79739778
版权

Promise，作为一个前端工程师，或多或少都避免不了使用他。作为一种异步编程的解决方案，它相较于传统的回调函数，功能更强大，书写更简洁合理。Promise的出现本质就是为了解决回调地狱的问题。

什么是回调地狱

提到回调地狱的问题，大部分人都会用ajax作为例子讲解，这边本人也免不了俗的用一个ajax的例子：

$.ajax({
  urL: 'savea',
  success: function () {
    $.ajax({
      url: 'saveb',
      success: function () {
        $.ajax({
          url: 'submit',
          success: function () {

          }
        })
      }
    })
  }
})

从上面的代码我们就能看到问题的所在，当嵌套回调过多的时候代码就会变得又臭又长，旁人过来一眼看去，那真的简直了，给后期的维护也会带来很大的问题，比如某天某个＊＊产品过来说这个改一下，要先保存b，在保存a，那就呵呵了。

Promise的链式调用

Promise的一大特点就是它的链式调用，用Promise改写上面的代如下： 

var saveA = new Promise(function (resolve,reject) {
  $.ajax({
    url:'savea',
    success: function (response) {
      resolve(response);
      //err: reject()
    }
  })
});
saveA.then(function () {
  $.ajax({
    url:'saveb',
    success: function () {

    }
  })
}).then(function () {
  $.ajax({
    url:'submit',
    success: function () {

    }
  })
});

这样看上去结构就显得更加清晰明了，就是初次看代码的人也能一眼看出来前后依赖关系，这种现象在出现多层回调更加明显。
以上就是一个Promise的最简单的使用方式，关于他的其他使用方式本文不做介绍，具体可以参考阮一峰的 ECMAScript 6 入门：Promise 对象

Promise的原理分析

介绍了简单的使用，接下来就是怎么去自己实现Promise了。参考上面的例子我们不难发现，我们使用new命令生成了一个Promise对象，我们传入了一个函数作为参数，这个函数同时有resolve、reject两个函数方法。执行两个函数都会改变Promise对象生成实例的内部状态。它的内部状态图如下：
内部状态图

对象生成的初始状态是pending，resolve执行后状态变更为 fulfilled , reject执行后状态变更为rejected。

初始搭建一个简单的函数

借由上面的思路我们可以初始搭建一个简单的构造函数:

function Promise(executor) {
  var status = 'pending';
  function resolve(value) {
    status = 'fulfill';
    console.log(value);  //fulfilled
  }
  function reject(e) {
    status = 'reject';
    console.log(e);  //rejected
  }

  executor(resolve,reject)
}

var promise = new Promise(function (resolve,reject) {
  resolve('fulfilled');
  reject('rejected');
});

上面这段代码我们也看出了一点问题，就是在执行完内部状态变了两次，显然这并不是我们想要的，理论上我们应该在状态在pending->fulfilled 或者 pending->rejected之后就不应该再此变更。修改一下上边的代码：

function Promise(executor) {
  var status = 'pending';
  var done = false;
  function resolve(value) {
    if(done){
      return
    }
    done = true;
    status = 'fulfill';
    console.log(value); //fulfilled
  }
  function reject(e) {
    if(done){
      return
    }
    done = true;
    status = 'reject';
    console.log(e); //不显示
  }

  executor(resolve,reject)
}

var promise = new Promise(function (resolve,reject) {
  resolve('fulfilled');
  reject('rejected');
});

上面代码尽管实现了功能，但把逻辑揉杂在一起，不利于维护。我们可以将控制这部分的逻辑剥离出来用一个函数去实现，修改完成的代码如下：

function Promise(executor) {
  var status = 'pending';
  function resolve(value) {
    status = 'fulfill'；
  }
  function reject(e) {
    status = 'reject';
  }
  doOnce(executor,resolve,reject)
}
function doOnce(fn,onFulfill,onReject) {
  var done = false;
  fn(function (value) {
    if(done) return;
    done = true;
    onFulfill(value)
  },function (e) {
    if(done) return;
    done = true;
    onReject(e)
  })
}
var promise = new Promise(function (resolve,reject) {
  resolve('fulfilled');
  reject('rejected');
});

添加then方法

上一步我们实现了Promise的雏形，但关键的链式调用我们还没有实现，这一步，我们开始实现Promise的链式调用。

在实现之前我们回忆一下使用Promise的then方法，简单的：

var promise = new Promise(function (resolve,reject) {
});
promise.then(function () {
  //内部状态为fulfilled 执行
},function () {
  //内部状态为rejected 执行
})

从上面可以看出来，我们调用then方法时传入了两个函数分别处理内部不同状态，内部状态为fullfilled即执行了resolve函数后，我们调用第一个函数参数；内部状态为rejected即执行了reject函数后调用第二个。同时then返回的是一个执行过resolve或者reject方法的Promise对象，所以接下去才可以继续调用。参考这个模式我们改进一下之前代码:

function Promise(executor) {
  var status = 'pending', self = this, value;
  function resolve(newValue) {
    status = 'fulfill';
    value = newValue;
  }
  function reject(e) {
    status = 'reject';
    value = e;
  }
  this.then = function (onFulfilled,onRejected) {
    return new self.constructor (function (resolve,reject) {
      if(status === 'fulfill') {

        resolve(onFulfilled(value));
      }else if(status === 'reject') {
        reject(onRejected(value));
      }
    })
  };
  doOnce(executor,resolve,reject)
}

var promise = new Promise(function (resolve,reject) {
  resolve('fulfilled');
});

//then方法调用
promise.then(onResolve,onRejected);
function onResolve(value) {
  console.log(value); //fulfilled
  }
function onRejected(e) {
  console.log(e);
}

那么这里有一个问题来了，如果状态延迟改变呢，即刚开始状态为pending，1s之后状态变了，即：

var promise = new Promise(function (resolve,reject) {
  setTimeout(function () {
    resolve('fulfilled');
  },1000);
});

按照之前的代码的话，没有一个方法会执行。这个时候我们就要对pending状态的做对应的处理，我们想到的应该就是在状态pending时将事件存储起来，等到下个resolve或reject方法执行到的时候一次性执行：

function Promise(executor) {
  var status = 'pending', self = this, value = null;
  var events = [];
  function resolve(newValue) {
    status = 'fulfill';
    value = newValue;
    for(var i = 0,len = events.length; i< len; i++) {
      //执行events的所有事件
    }
  }
  function reject(e) {
    status = 'reject';
    value = e;
  }
  this.then = function (onFulfilled,onRejected) {
    return new self.constructor (function (resolve,reject) {
      if(status === 'pending') {
        events.push({
          onFulfilled: onFulfilled,
          onRejected: onRejected,
          resolve: resolve,
          reject: reject
        })
      };
      if(status === 'fulfill') {
        if(onFulfilled === 'null') {
          resolve(value);
          return;
        }
        resolve(onFulfilled(value));
      }else {
        if(onRejected === 'null') {
          reject(value);
          return
        }
        reject(onRejected(value));
      }
    })
  };
  doOnce(executor,resolve,reject)
}

可以看到then方法里面做了一系列的复杂判断，又出现了之前一样的问题。这个时候我们可以和之前一样把这部分代码抽离出来形成一个独立的方法:

//根据status处理事件
  function handle (event) {
    if (status === 'pending') {
      events.push(event);
      return;
    }
    var cb = (status === 'fulfilled') ? event.onFulfilled : event.onRejected;
    if(cb === null) {
      (status === 'fulfilled' ? event.resolve : event.reject)(value);
      return;
    }
    var result;
    try {
      result = cb(value);
    } catch (e) {
      event.reject(e);
      return;
    }
    event.resolve(result);
  }

改进后的代码如下：

function Promise(executor) {
  var status = 'pending', self = this, value = null;
  var events = [];
  function resolve(newValue) {
    status = 'fulfill';
    value = newValue;
    for(var i = 0,len = events.length; i< len; i++) {
      handle(events[i]);
      events = null;
    }
  }
  function reject(e) {
    status = 'reject';
    value = e;
  }
  this.then = function (onFulfilled,onRejected) {
    return new self.constructor (function (resolve,reject) {
      handle(new HandleCreator(onFulfilled,onRejected,resolve,reject))
    })
  };
  function handle (event) {
    if (status === null) {
      events.push(event);
      return;
    }
    var cb = status ? event.onFulfilled : event.onRejected;
    if(cb === null) {
      (status ? event.resolve : event.reject)(value);
      return;
    }
    var result;
    try {
      result = cb(value);
    } catch (e) {
      event.reject(e);
      return;
    }
    event.resolve(result);
  }
  doOnce(executor,resolve,reject)
}

同样的，在reject函数执行时也要执行events里的所有事件，这样我们就可以将这部分抽离出一个函数: 

 function finale () {
    for(var i = 0,len = events.length; i< len; i++) {
      handle(events[i]);
      events = null;
    }
  }

到此我们已经完成一个包含then链式调用的Promise函数，完成代码如下： 

function Promise(executor) {
  if(typeof this !== 'object') throw TypeError('Promise must be  new');//promise 必须用new生成
  if(typeof executor !== 'function') throw TypeError('param is required function');//参数为函数
  var status = 'pending', self = this, value = null;
  var events = [];
  //将状态更新为fulfilled
  function resolve(newValue) {
    status ='fulfilled';
    value = newValue;
    finale();
  }
  //状态更新为rejected
  function reject(e) {
    status ='rejected';
    value = e;
    finale();
  }
  //then方法返回一个promise
  this.then = function (onFulfilled,onRejected) {
    return new self.constructor(function (resolve,reject) {
      handle(new HandleCreator(onFulfilled,onRejected,resolve,reject));
    })
  };
  //根据status处理事件
  function handle (event) {
    if (status ==='pending') {
      events.push(event);
      return;
    }
    var cb = status === 'fulfilled' ? event.onFulfilled : event.onRejected;
    if(cb === null) {
      (status === 'fulfilled' ? event.resolve : event.reject)(value);
      return;
    }

    var result;
    try {
      result = cb(value);
    } catch (e) {
      event.reject(e);
      return;
    }
    event.resolve(result);
  }
  //执行所有注册的事件
  function finale() {
    for(var i = 0, len = events.length; i < len; i++) {
      handle(events[i]);
      events = null;
    }
  }

  doOnce(executor,resolve,reject);
}

//确保只更改一次状态
function doOnce(fn,onFulfilled,onRejected) {
  var done = false;
  try {//捕获错误
    fn(function (value) {
      if(done) return;
      done = true;
      onFulfilled(value);
    },function (e) {
      if(done) return;
      done = true;
      onRejected(e);
    })
  } catch (e) {
    if(done) return;
    done = true;
    onRejected(e);
  }

}

//事件生成器
 function HandleCreator(onFulfilled,onRejected,resolve,reject) {
   this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;
   this.onRejected = typeof onRejected === 'function' ? onRejected : null;
   this.resolve = resolve;
   this.reject = reject;
 }

总结：

之前使用promise的时候，总是一知半解似懂非懂，对于它的原理也没有一个清晰的认知。只有当自己一步步的去调试，实现的过程中才慢慢有了感觉，对Promise才有了一个更深刻的理解。

ps:这里只是实现了then方法，catch方法的实现在后续我会继续去完善，如果各位看到有觉得错误的，希望可以指出，我会及时改正，如果有好的想法也希望可以相互讨论。

emily_cd
关注
专栏目录
promise简单实现
qq_39692513的博客
06-16 1096
promise简单实现
nodejs中简单实现Javascript Promise机制的实例
10-25
本文将详细介绍如何在Node.js中通过代码示例简单实现Promise/A+规范。 首先，我们需要理解Promise/A+规范的核心内容。Promise/A+规范是一份为JavaScript中的Promise定义实现的行为规范，该规范由一系列具体的要求和...
Promise的简单实现
08-11
这是一个Promise的简单实现，不含任何第三方插件。
实现一个简单的Promise
weixin_39360915的博客
07-30 726
我们可以在chrome开发工具下看下原生 promise 是什么：new Promise((resolve, reject) => {}) return Promise { [[PromiseStatus]]: "pending", [[PromiseValue]]: undefined }可以看出Promise 实例有两个property，一个表示status一个为value所以我们可以这样写P
JS高级——Promise使用
最新发布
@SCY
07-28 1620
当所有的Promise状态变成fulfilled状态时，新的Promise状态为fulfilled，并且会将所有Promise的返回值组成一个数组；当有一个Promise状态为reject时，新的Promise状态为reject，并且会将第一个reject的返回值作为参数；在我们调用resolve的时候，如果resolve传入的值本身不是一个Promise，那么会将该Promise的状态变成。如果所有的Promise都是reject的，那么也会等到所有的Promise都变成rejected状态；
简单promise的实现
Goodbye_的博客
01-21 299
在实现promise之前，先简单的回顾一下promise Promise 对象有以下两个特点: 1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。 2、一旦状态改变，就不.
简单实现一个Promise
roamingcode的博客
08-23 487
Promise 实现
js代码-Promise 的简单实现
07-16
本主题将深入探讨如何实现一个简单的Promise。 首先，Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。当Promise创建时，其初始状态为pending。一旦状态由pending变为fulfilled或...
js使用Promise实现简单的Ajax缓存
10-17
主要介绍了js使用Promise实现简单的Ajax缓存，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Promise超简易实现
疯狂紫萧
08-07 1770
有时候就需要一个简单的Promise撑场面，能用就行。 ——真不行的时候咱再使用正事的呗。实现的方法1.new Promise(fn),创建一个新的Promise对象并传入第一个执行方法。 2.resolve。成功的执行方法 3.reject。失败的执行方法 4.catch。失败的捕获。 5.then。链式调用下一步。原理内部使用一个数组报错需要执行的所有方法，使用then来添加新的方法。
Promise原理解析
weixin_33700350的博客
04-05 141
Promise是异步编程的一种解决方案，比回调函数和事件更合理更强大。 原生的promise用法如下： let p=new Promise(function(resolve,reject){ resolve('成功'); //reject('失败'); }); p.then(function(data){ console.log(data); },function(err)...
Promise
亚洲的博客
11-24 304
Promise 名词约定 一般来讲，有以下的名词约定： promise(首字母小写) 对象指的是“Promise实例对象” Promise 首字母大写且单数形式，表示“Promise构造函数” Promises 首字母大写且复数形式，用于指代“Promises规范” 什么是Promise? Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败） Promise是一
Promise 最简单的实现
天天的博客
03-14 235
<script type="text/javascript"> //自定义个promise类 ，就这里面写 function P(executer){ // 类里的方法，函数实例 const self = this; self.data = null;// 存放结果值 self.callbacks = [];//存放异步操作...
最简单！实现Promise的两种思路分析
weixin_33724659的博客
04-03 408
引言 Promise是一种异步编程的解决方案，通过链式调用的方式解决回调地狱。作为前端面试中的考点，也是前端的基本功，掌握其原理是非常重要的。本次分享就从Promise的使用方式上出发，一步一步剖析其原理，最后帮助大家封装出自己的Promise。 注：如果你还不了解Promise，建议点击这里学习Promise的基本使用语法。 本文知识点： 非规范的（简单粗暴）Promise的原理 规范的（Pr...
JavaScript简单实现Promise/A+规范
不断成长的我
09-26 1715
Promise/A+规范是什么Promise表示一个异步操作的最终结果。与Promise最主要的交互方法是通过将函数传入它的then方法从而获取得Promise最终的值或Promise最终最拒绝（reject）的原因。具体详细的讲解请移步： - wikipedia上的介绍 -官方介绍网址简单的实现代码'use strict';Promise = () => {};var isPromise =
自己如何实现promise？
weixin_33953384的博客
03-15 586
如果让你实现一个 promise ,你会怎么做？ 自己实现promise的大体思路 我们要明确我们需要一个异步的操作方法,满足异步回调。所以选择加入setTimeout 作为实现的基础， 让函数实现延迟触发。 保持一个原则，控制 promise 改变状态的只有 promise 构造函数里的 reslove 、 reject 函数。 链...
最简单代码实现promise
xif3681的博客
05-27 580
Promise是一个对象，保存着未来将要结束的事件，它有两个特征: 1、对象的状态不受外部影响，Promise对象代表一个异步操作，有三种状态，pending进行中，fulfilled已成功，rejected已失败，只有异步操作的结果，才可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也就是promise名字的由来 2、一旦状态改变，就不会再变，promise对象状态改变只有两种可...
es6 Promise.done(),Promise.finally()
热门推荐
歪脖先生的博客
01-28 1万+
Promise.done(),Promise.finally() ES6 的 Promise API 提供的方法不是很多，有些有用的方法可以自己部署。下面介绍如何部署两个不在 ES6 之中、但很有用的方法。 done() Promise 对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为 Promise 内部的错误不会冒泡
深入理解JavaScript：手动实现一个简单Promise
"这篇文章主要讲解如何在JavaScript中实现一个简单的Promise，遵循Promise/A+规范，通过实例代码解析Promise的核心功能，包括构造函数、resolve、reject、then和catch方法的实现。" 在JavaScript中，Promise是一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值