您的位置:时时app平台注册网站 > web前端 > 10行代码实现简易版的Promise

10行代码实现简易版的Promise

2019-11-08 04:00

这里的after方法相当于then方法。那么MyPromise的简易版就成功了。他的调用方法和示范的调用是相似的。

MyPromise的粗略伪完结

Promise对象表示二个异步操作的尾声结果,用来传递异步传输的多少。达成Promise早先大家需求先明白一下Promise/A 规范

正规重大有以下几点:

  1. Promise有两种境况,pending、已做到fulfilled、rejected
  2. Promise的意况只好从pending转到fullfilled大概从pending转向rejected,不能够逆向转换,相同的时间fullfilled和rejected之间也无法互相调换
  3. Promise必需有二个then方法,并且要回去三个Promise,供then方法的链式调用,也等于可thenable的
  4. then选拔俩个回调函数(resolve与reject),在相应的图景转换时接触,回调可回到Promise,等待此Promise被resolved后,继续触发then链式调用

略知意气风发二那多少个至关心珍视要的风味,大家就能够参照浏览器内置的api来促成三个Promise了,本文使用ES6语法

  • 第生机勃勃,我们来看看Promise是哪些使用的,以至常用的部分API
let P = new Promise()

let func1 = () => {
    console.log('func1')
    setTimeout(() => {
        P.resolve('1')
    }, 1000)
    return P
}

let func2 = result => {
    console.log('func2', result)
    setTimeout(() => {
        P.reject('2')
    }, 1000)
}

let func3 = result => {
    console.log('func3', result)
    setTimeout(() => {
        P.resolve('3')
    }, 1000)
}

let func4 = result => {
    console.log('func4', result)
    setTimeout(() => {
        P.resolve('4')
    }, 1000)
}

let func5 = result => {
    console.log('func5', result)
}

//调用
func1().then(func2, func3).then(func3).then(func4).catch(func5)

以上即是八个Promise的焦点使用,通过解析上面的运用办法,大家开采Promise对象具有then和catch方法,同不时候能够链式调用,接下去大家参照下面的案列来促成谐和的Promise---MyPromise

  • 首先步 大家创立二个MyPromise类,具有then和catch方法,
calss MyPromise {
  constructor(){

  }
  then(){

  }
  catch(){

  }
}
  • 第二步 增多状态管理,因为有fullfiled和rejected二种状态,那么大家就增添resolve方法和reject方法开展状态管理
calss MyPromise {
  constructor(){

  }
  then(){

  }
  catch(){

  }
  // fullfiled状态的管理
  resolve() {

  }

  // rejected状态的管理
  reject() {

  }
}
  • 其三步 注册回调函数与执行回调,设定二个数组对亟待进行的主意进行暂存,以至一个措施的施行器,该试行器注重于resolve和reject传入的动静实行相应的施行
calss MyPromise {
  constructor(){
    this.callbacks = [] //回调函数的储存容器
  }
  then(){

  }
  catch(){

  }

  resolve() {    // fullfilled的管理

  }

  reject() {      // rejected的管理

  }

  execute(){    //回调函数触发方法

  }
}
  • 第四步 编写then函数与推行器中的逻辑
    在写then函数早先,先看看最早先Promise的调用格局func1().then(func2,func3).then(func4).catch(fuc5),then方法选择三个参数,二个打响回调八个波折回调,同期能够开展链式调用
then(onSuccess, onFail) {
  this.callbacks.push({
    resolve: onSuccess,
    reject: onFail
  })
  return this   //链式调用
}

这个时候在调用func1时她会先回到Promise对象,然后再调用setTimeout里面的resolve回调并传播参数,而在resolve函数中调用了实行器execute,何况传入了resolve这些场地和在func第11中学传播的参数;

// fullfilled的管理
resolve(result) {
  this.execute('resolve', result)
}

// rejected的管理
reject(result) {
  this.execute('reject', result)
}

// 实行execute函数,其实深入分析到了这一步就很粗大略了,不过是将原先传入callbaks中的函数收取来,然后试行此中的打响回调就是了

execute(status, result) {
    // 取出之前传入的回调函数对象(包含成功和失败回调),然后执行
    let handlerObj = this.callbacks.shift()
    handlerObj[type](result)
}

完全代码

class MyPromise {
    constructor() {
        this.callbacks = []
    }

   then(onSuccess, onFail) {
     this.callbacks.push({
       resolve: onSuccess,
       reject: onFail
     })
     return this    //链式调用
   }

    catch (fail) {

        return this
    }

    resolve(result) {
        this.actuator('resolve', result)   // fullfilled的管理
    }

    reject(result) {
        this.actuator('reject', result)    // rejected的管理
    }

    // 执行器
    execute(status, result) {
        // 取出之前传入的回调函数,执行
        let handlerObj = this.callbacks.shift()
        handlerObj[status](result)
    }
}
  • 实际到了这一步,Promise的基本成效then(以致回调resolve和reject卡塔 尔(阿拉伯语:قطر‎已经完毕了,接下去大家来贯彻catch方法,catch方法正是在Promise产生rejected状态的时候,调用实践的回调
class MyPromise {
   constructor() {
       this.callbacks = [] //then的回调
       this.catchcallback = null //catach的回调
   }

     //此处省略其他代码...............

   catch (onFail) {
       this.catchcallback = onFail // 保存传入的失败回调
       return this // 用于链式调用
   }


     //此处省略其他代码..............


   // 执行器
   execute(status, result) {
       if (status === 'reject' && this.catchcallback) {
           this.callbacks = [] //catch方法的处理
           this.catchcallback(result)
       } else if (this.callbacks[0]) {
           // 取出之前传入的回调函数对象(包含成功和失败回调),然后执行
           let handlerObj = this.callbacks.shift()
           handlerObj[status](result)
       }
   }
}  

上边来探视func1().then(func2, func3).then(func3).then(func4).catch(func5)的执行结果吗

  1. 全部fullfilled状态

图片 1

  1. fun2为rejected状态

图片 2

从那之后,二个Promise的大约伪完结就完结了,行文大约理清了promise的办事原理。

主题材料生机勃勃:then方法的链式调用

MyPromise.prototype.after = function (resovle, reject) {
        this.doSomething(resovle, reject)
        return this
    }

文章地址:一步一步实现一个顺应PromiseA 标准的Promise库(1卡塔尔国

率先Promise是二个构造方法,并且开首化的时候传出了一个函数作为参数

Hello everybody。小编又来啦,还记得我们上一张完毕的从头到尾的经过吧?

下边大家单方面解析,意气风发边达成团结的promise。

自然大家着力精晓了Promise的基本原理,以后大家就可以说咱俩既会使用又有何不可兑现多少个Promise。

图片 3

理所必然还可能有点细微的主题材料,便是Promise中有广大艺术我们尚无贯彻。比方:

Promise.resolve() .   Promise.reject()  ..还会有.catch()方法  Promise.all()方法等等

在下风流倜傥篇小说中,大家会挨个的去落到实处那些方法,况且会介绍一下前端开垦最近几年的异步发展流程

开始时代的callback->Promise->generator函数->大家前日常用的 async await

好了,就到此地呢。看见此间蛮不便于,谢谢我们。

图片 4

忘了创新下篇随笔地址了。。

更新:一步一步实现二个顺应PromiseA 标准的Promise库(3卡塔 尔(阿拉伯语:قطر‎

后记:比较Promise,这些完毕过于简短,作用上简直不值大器晚成提。仅仅引玉之砖。

出于明天的代码是基于上三回大家贯彻的内容,所以不甚领会的同伴们得以去看本人上豆蔻年华篇文章。。

var MyPromise = function (doSomething) {
        this.doSomething = doSomething
    }

so,开搞。

我们先来拍卖第五个难点,让我们的then方法辅助链式调用,並且能承当平时值。

我们先来改革then方法中的对于成功景观(onfulfilled卡塔 尔(英语:State of Qatar)的推断,因为上面包车型地铁跟他是同样的道理。

图片 5

那边大家先是来看定义的Promise2。为何要定义那样一个变量呢?

大家要明白,要是要兑现Promise中then方法的链式调用。当首个then运转达成况且把重回值给我们今后,我们也要回到这几个值。

作者们禁不住要问了?一个值怎么怎会有then方法呢?于是我们要把那些值包装成一个Promise对象给再次来到出去

因此说,我们必要使种种情状都回去三个Promise。。说的有一点多。大家来测量检验一下。

图片 6

大家随后改上面三个情景。

图片 7

我们来捋风华正茂捋。通过测量检验。

图片 8

我们来看代码运维了2.496秒,大家的测量检验结果是合情合理的;

到此地大家就解决了then方法链式调用并且在then方法中回到四个常备值到下一回then方法的成功景色中。

图片 9

是还是不是深感很爽

接下去大家缓和第三个难点。大家是供给允许在then方法中回到Promise的。。所以,我们也要管理这种情况。

Let  us  try to do it

图片 10

浮现一下笔者深厚的俄文底子


事实上相当的粗略,大家必要叁个联结的管理函数来扩充在then中回到Promise的管理。。

大家先新建叁个艺术叫做resolvePromise(Promise的垄断(monopoly卡塔 尔(英语:State of Qatar)卡塔尔

图片 11

在标准中商讨。

图片 12

如何看头啊,便是说假设Promise2和x指向的是同多个对象,大家这里就要把须求回到的Promise2置为reject並且要赶回叁个品种错误。看上面包车型地铁代码

图片 13

额,正是如此

然后我们陈述一下细节。。

图片 14

emmmmmmmm...

图片 15

const src = 'https://img-ph-mirror.nosdn.127.net/sLP6rNBbQhy0OXFNYD9XIA==/799107458981776900.jpg?imageView&thumbnail=223x125&quality=100'

const mypromise = new MyPromise(function (resovle, reject) {
            var img = document.createElement('img')
            img.onload = function () {
                resovle(img)
            }

            img.onerror = function () {
                reject()
            }

            img.src = src
        })

mypromise.after(function (img) {
        console.log(img.width)
    }, function () {
        console.log('错误')
    }).after(function (img) {
        console.log(img.height)
        document.body.appendChild(img)
    })

    上一张大家达成了二个轻易易行的Promise。我们兑现了Promise内部的轻松流程和then方法,而且完成了Promise的异步调用。不过大家也留下了有的标题。。。

then方法很扎眼能够阅览是Promise的实例方法,并且能够兑现链式调用,表达在then方法中回到了Promise实例,即this

那TM有一点细节。。

好了不逗了,大家在代码里面深入分析的很明亮了。大家来捋意气风发捋思路。

在then方法中是能够回去一个Promise的对啊,然后大家获得了then方法的试行结果,也正是唯恐是贰个Promise恐怕是叁个普通值(也正是x卡塔 尔(阿拉伯语:قطر‎。然后大家对这几个x实行剖断,大家先是要剖断那么些x是否一个Promise对吧。

若果不是大家能够直接再次来到x,假诺是的话,我们相应知道,Promise都会有then方法。大家接下去就供给看清那些then方法是否多少个function。借使不是大家就一贯重临那么些then的值,emmm...他应给正是五个常常值。

比方这些then方法是二个function大家就能够直接去施行他。大家在多少个回调中开展操作,假诺奉行的是onfulfilled则大家实行了首要的一步,正是递归调用大家的resolvePromise方法去看大家的onfulfilled传进来的参数是或不是如故三个Promise,,就像是此直白调用,,直到x或然x.then是叁个平时的值停止,然后我们就能够回到那个值,也便是resolve大家最后的值。

当然我们那边加了try{}catch(){}仍然为着防止程序运转中的错误。

然后我们就能够把大家事先的景况判别中的resolve替换来大家的resolvePromise方法,举个例子:

图片 16

本来上边包车型大巴pending状态也是如出后生可畏辙的。

图片 17

到那边大家的Promise已经完毕的大都了。可是还应该有一个主题素材。我们思虑以下代码;

图片 18

下边代码用的是ES6的原生的Promise

what?大家能够看来,第二个then方法中并从未其余东西,不过我们第二个then中却得到了promies中resolve的值。

我们都清楚,then方法中有onfulfilled和onreject四个回调函数,所以大家要拍卖一下这多个回调函数。

图片 19

瞩目onrejected中的default函数重临是用了throw。因为大家要回去到下三遍的reject中

大家得以在then方法中管理一下那八个回调。判定一下他们的种类,倘若类型是function就意味着那七个回调是有东西的。否则呢我们就回去二个暗中认可的无名函数,那一个函数的参数正是上叁遍Promise再次回到的值,也正是当大家再度实践onfulfilled或许onrejected的时候就足以平昔拿到那些值了。也就瓜熟蒂落了大家想要的功用。

 

图片 20

const src = 'https://img-ph-mirror.nosdn.127.net/sLP6rNBbQhy0OXFNYD9XIA==/799107458981776900.jpg?imageView&thumbnail=223x125&quality=100'

const promise = new Promise(function (resovle, reject) {
            var img = document.createElement('img')
            img.onload = function () {
                resovle(img)
            }

            img.onerror = function () {
                reject()
            }

            img.src = src
        })

promise.then(function (img) {
        console.log(img.width)
    }, function () {
        console.log('错误')
    }).then(function (img) {
        console.log(img.height)
        document.body.appendChild(img)
    })

咱俩都知道,二个Promise是能够在里头重回Promise的(当然也能够回来三个平日性的值卡塔尔。而且呢,再次来到的Promise恐怕再次回到的何奇之有值大家需求去拿到它的值何况回传给大家下一遍的then方法中。比方:

 

前不久,我们多数就贯彻了一个比较完好地Promise。大家贯彻了Promise异步调用,在then方法中回到Promise也许值,达成了then方法中得以未有回调函数也能把实践结果传到下叁遍的then方法中。

落到实处以前,大家先看看Promise的调用

就此难题就来了。

本来大家也得以在then方法中回到三个Promise;


难点二:尽管在then方法中回到Promise大概普通值的图景,大家要求怎么管理。

图片 21

图片 22

本文由时时app平台注册网站发布于web前端,转载请注明出处:10行代码实现简易版的Promise

关键词: