JavaScript五十问——浅入深出,自己实现一个 ES 6 Promise

2019-01-12 admin

[TOC]

说到 ES6,Promise 是绕不过的问题;如果说 ES6 的 Class 是基于 Javascript 原型继承的封装,那么 Promise 则是对 callback 回调机制的改进。这篇文章,不谈 Promise 的实际应用;聊一下 Promise 的实现原理,从最简单的解决方案入手,一步一步的自己实现一个 SimplePromise。

正文

从最简单的 Promise 初始化和使用入手:

const pro = new Promise ((res, rej) => {})

pro.then(data => {}, err => {})

Promise 的构造函数如上,需要传递一个函数作为参数,这个函数有两个变量: resolve, reject。而 Promise 有不同的执行状态,分三种情况:Resolve, Reject, Pending。根据以上的信息,写出最基本的 SimplePromise 的类结构:

class SimplePromise{
  constructor(handler){
    this._status = "PENDING"
    handler(this._resolve.bind(this), this._reject.bind(this))//参数函数的作用域指向Class
  }

  _resolve(){}
  _reject(){}
}

接下来思考一下_resolve_reject两个函数的作用。我们知道,Promise 根据 then 方法来执行回调,而 then 是根据状态判断要执行的回调函数。不难推导出,_resolve_reject正是根据handler的执行来进行状态变更的,而状态只能由PendingResloveRejected转换,所以有:

class SimplePromise{
  constructor(handler){
   ...
  }

  _resolve(val){//异步返回的数据
    if(this._status === "PENDING"){//保证状态的不可逆性
      this._status = "RESOLVED"
      this._value = val
    }
  }
  _reject(val){
    if(this._status === "PENDING"){
      this._status = "REJECTED"
      this._value = val
    }
  }
}

then的调用逻辑

下面分析 then 函数的逻辑,从调用入手:

pro.then(data => {}, err => {})

then 接收两个参数,第一个是执行成功调用的函数,第二个是执行失败调用的函数。

class SimplePromise{
  constructor(handler){
    ...
  }

  _resolve(val){
   ...
  }
  _reject(val){
    ...
  }
  then(success, fail){
    switch (this._status){
      case "PENDING":
        break;
      case "RESOLVED":
        success(this._value)
        break;

      case "REJECTED":
        fail(this._value)
        break;
    }
  }
}

以上实现了最简单的一个 Promise 测试代码:

const pro = new SimplePromise(function(res, rej) {
    let random = Math.random() * 10
    if(random > 5){
      res("success")
    }
    else{
      rej("fail")
    }
})

pro.then(function(data) {
  console.log(data)
}, function(err) {
  console.log(err)
})

当然,这不能算是一个 Promise,目前仅仅实现了根据状态调用不同的回调函数。还没有实现异步。 那如何实现异步呢?关键在于 then 函数,当判断_statusPENDING时,如何延后调用 successfail函数,等待状态改变后再调用?

支持异步

这里采用数组来存储 fail 与 success 函数:

class SimplePromise{
  constructor(handler){
    this.status = "PENDING"
    this._onSuccess = []//存储fail 与 success 函数
    this._onFail = []
    handler(this._resolve.bind(this), this._reject.bind(this))
  }

  _resolve(val){
    if(this.status === "PENDING"){
      ...
      let temp
      while(this._onSuccess.length > 0){//依次执行onSuccess中的回调函数
        temp = this._onSuccess.shift()
        temp(val)
      }
    }
  }
  _reject(val){
    if(this.status === "PENDING"){
     ...
      let temp
      while(this._onFail.length > 0){
        temp = this._onFail.shift()
        temp(val)
      }
    }
  }

  then (success, fail){
    switch (this.status){
      case "PENDING":
        this._onSuccess.push(success)
        this._onFail.push(fail)
        break;
      ...
    }
  }
}

使用 onSuccessonFail 来存储回调函数,当处理状态为 PENDING 时,将回调函数 push 到相应的数组里,当状态变更后,依次执行数组里的回调函数。

测试代码:

const pro = new SimplePromise(function(res, rej) {
  setTimeout(function(){
    let random = Math.random() * 10
    if(random > 5){
      res("success")
    }
    else{
      rej("fail")
    }
  }, 2000)

})

pro.then(function(data) {
  console.log(data)
}, function(err) {
  console.log(err)
})

两秒后,会执行相应的回调。

到目前为止,最最最简单的一个 Promise 骨架已经基本完成了。但是还有很多功能待完成。现在可以稍微休息一下,喝个咖啡打个鸡血,回来我们会继续让这个 Promise 骨架更加丰满起来。

. . . . . .

完善Promise

欢迎回来,下面我们继续完善我们的 Promise。 上面完成了一个最基础的 Promise,然而还远远不够。首先,Promise 需要实现链式调用,其次 Promise 还需要实现 all race resolve reject 等静态函数。

首先,如何实现 then 的链式调用呢?需要 then 返回的也是一个 Promise。 于是有

class SimplePromise{
  ...
  then(success, fail){
      return new SimplePromise((nextSuccess, nextFail) => {
        const onFullfil = function(val){
          const res = success(val)
          nextSuccess(res)
        }

        const onReject = function(val){
          const res = fail(val)
          nextSuccess(res) ;
        }
        switch (this._status){
          case "PENDING":
            this._onSuccess.push(onFullfil)
            this._onFail.push(onReject)
            break;
          case "RESOLVED":
            onFullfil(this._value)
            break;

          case "REJECTED":
            onReject(this._value)
            break;
        }
      })
  }
}

测试代码:

const sp = new SimplePromise(function (res, rej){
  setTimeout(function(){
    let random = Math.random() * 10
    random > 5 ? res(random) : rej(random)
  }, 1000)
})

sp.then(data => {
  console.log("more than 5 " + data)
  return data
}, err =>{
  console.log("less than 5 " + err)
  return err
}).then((data) => {
  console.log(data)

})

then的参数限制

完成了链式调用,then 方法还有许多其他限制: 下面思考 以下问题:代码中四个使用 promise 的语句之间的不同点在哪儿? 假设 doSomething 也 doSomethingElse 都返回 Promise

doSomething().then(function () {
    return doSomethingElse();
}).then(finalHandler);

doSomething().then(function () {
    doSomethingElse();
}).then(finalHandler);;

doSomething().then(doSomethingElse()).then(finalHandler);;

doSomething().then(doSomethingElse).then(finalHandler);;

答案 一会儿再揭晓,我们先来梳理以下then 方法对传入不同类型参数的处理机制: 直接上代码:

class SimplePromise{
  ...
  then(success, fail){
    return new SimplePromise((nextSuccess, nextFail) => {
      const onFullfil = function(val){
        if(typeof success !== "function"){
          nextSuccess(val)
        }
        else{
          const res = success(val)//success 的返回值
          if(res instanceof SimplePromise){//如果success 返回一个promise 对象
            res.then(nextSuccess, nextFail)
          }
          else{
            nextSuccess(res)
          }
        }
      }
      if(fail){
        const onReject = function(val){
        if(typeof fail !== "function"){
          nextSuccess(val)
        }
        else{
          const res = fail(val)
          if(res instanceof SimplePromise){
            res.then(nextSuccess, nextFail)
          }
          else{
            nextSuccess(res)
          }
        }
      }
      }
      else{
        onReject = function(){}
      }
      switch (this._status){
      case "PENDING":
        this._onSuccess.push(onFullfil)
        this._onFail.push(onReject)
        break;
      case "RESOLVED":
        onFullfil(this._value)
        break;

      case "REJECTED":
        onReject(this._value)
        break;
      }
    })
  }
}

对于传入 then 方法的参数,首先判断其是否为 function,判断为否,直接执行 下一个 then 的 success 函数;判断为是,接着判断函数的返回值 res 类型是否为 Promise,如果为否,直接执行下一个 then 的 success 函数,如果为是,通过 then 调用接下来的函数。 所以,上面的问题就不难得到答案了。

<!-- 1 -->

doSomething().then(function () {
    return doSomethingElse();//返回值为Promise
}).then(finalHandler);

RETURN:
doSomething
          --->doSomethingElse(undefined)
                                        ---> final(doSomethingElseResult)
<!-- 2 -->
doSomething().then(function () {
  doSomethingElse();//返回值为 undefined
}).then(finalHandler);

RETURN:
doSomething
          --->doSomethingElse(undefined)
          ---> final(undefined)

<!-- 3 -->
doSomething().then(doSomethingElse())//参数 typeof != function
  .then(finalHandler);
RETURN:
doSomething
doSomethingElse(undefined)
            ---> final(doSomethingResult)

<!-- 4 -->
doSomething().then(doSomethingElse)//与1的调用方式是不同的
  .then(finalHandler);

RETURN:
doSomething
          --->doSomethingElse(doSomethingResult)
                                        ---> final(doSomethingElseResult)

好,then 方法已经完善好了。

静态函数

接下来是 Promise 的各种静态函数

class SimplePromise(){
  ...
  static all(){}
  static race(){}
  static resolve(){}
  static reject(){}
}

all

 static all(promiselist){
      if(Array.isArray(promiselist)){
        const len = promiselist.length;
        const count = 0
        const arr = []
        return new SimplePromise((res, rej) => {
          for(let i = 0; i<len; i++){
            this.resolve(promiselist[i]).then(data => {
              arr[i] = data
              count ++
              if(count === len){//每一个Promise都执行完毕后返回
                res(arr)
              }
            }, err => {
              rej(err)
            })
          }
        })
      }
    }

race

    static race(promiselist){
      if(Array.isArray(promiselist)){
        const len = promiselist.length
        return new SimplePromise((res, rej) =>{
          promiselist.forEach(item =>{
            this.resolve(item).then(data => {
              res(data)
            }, err =>{
              rej(err)
            })
          })
        })
      }
    }

resolve

    static resolve(obj){
      if(obj instanceof SimplePromise){
        return obj
      }
      else {
        return new SimplePromise((res) =>{
          res(obj)
        })
      }
    }

reject

    static reject(obj){
      if(obj instanceof SimplePromise){
        return obj
      }
      else {
        return new SimplePromise((res, rej) =>{
          rej(obj)
        })
      }
    }

总结

现在,一个完整的 Promise 对象就完成了。现在来总结一下 callback 回调和 Promise 的异同吧。 其实,不管是 callback 还是 Promise,这二者都是将需要滞后执行方法而提前声明的方式,只不过 callback 的处理方式比较粗犷,将 cb 函数放到异步执行的结尾;而 Promise 优于 cb 的是通过定义了不同的执行状态,更加细致的进行结果处理,提供了很好的 catch 机制,这是其一;其二,then 的链式调用解决了 cb 的回调地狱;但是 then 的链式调用也不是很好的解决方案,如果封装不好,then里面套用大量的代码的话也会引起代码的不美观和阅读上的困难,这一方面的终极解决方法还是 es7 的 async/await。

后记

这篇文章的代码是几个星期以前写的,参考的是思否上的一篇关于promise的文章;总结的是我对promise的理解和思考,如果有不准确或错误的地方还希望各位不吝赐教!

参考文档

谈一谈使用 Promise 的反模式<https://blog.csdn.net/kingppy…

写这篇文章的时候,我是参考我两周前的代码写的,当时的代码思路来源于思否上的谋篇博客,等我找到会贴上来

[转载]原文链接:https://segmentfault.com/a/1190000017865637

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50802.html

文章标题:JavaScript五十问——浅入深出,自己实现一个 ES 6 Promise

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
回到顶部