浏览器家园·资讯

展开

【库】Promise的简便实现,15行代码优雅解决异步嵌套

编辑:浏览器知识

该Promise的实现,只解决异步嵌套的问题,并没有其他All之类的方法哦。

一、类的定义阶段

class Pro {
  constructor (fn) {
    this.arr = []
    this.count = -1
    fn(this)
  }
  then (r) {
    if (typeof (r) === 'function') {
      this.arr.push(r)
      return this
    } else {
      this.arr[++this.count] && this.arr[this.count](this, r)
    }
  }
}
复制代码

该代码只有15行左右,要再短点也不是不可,但越短的代码只有两种可能,要么easy,要么difficulty,该类应该算是前者,再配合debugger还是比较容易看得懂的。


二、调用阶段

new Pro(fn => {
  setTimeout(() => {
    let data = 1 // 举例数据为1
    console.log('A拿到数据后,进行处理', data)
    console.log('A将数据传到下一个ajax')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) => {
  console.log('A上一个数据是', r)
  setTimeout(() => {
    let data = 2
    console.log('A拿到数据后,进行处理', data)
    console.log('A将数据传到下一个ajax')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) => {
  console.log('A上一个数据是', r)
  setTimeout(() => {
    let data = 3
    console.log('A拿到数据后,进行处理', data)
    console.log('A将数据传到下一个ajax')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) => {
  console.log('A上一个数据是', r)
  setTimeout(() => {
    let data = 4
    console.log('A拿到数据后,进行处理', data)
  }, 500)
})

复制代码

以下是返回的结果

这里写图片描述

这里就达到了嵌套的目的,并且代码上没有难看的阶梯状结构。


三、多异步调用检测

new Pro(fn => {
  setTimeout(() => {
    let data = 1 // 举例数据为1
    console.log('A拿到数据后,进行处理', data)
    console.log('A将数据传到下一个ajax')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) => {
  console.log('A上一个数据是', r)
  setTimeout(() => {
    let data = 2
    console.log('A拿到数据后,进行处理', data)
    console.log('A将数据传到下一个ajax')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) => {
  console.log('A上一个数据是', r)
  setTimeout(() => {
    let data = 3
    console.log('A拿到数据后,进行处理', data)
    console.log('A将数据传到下一个ajax')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) => {
  console.log('A上一个数据是', r)
  setTimeout(() => {
    let data = 4
    console.log('A拿到数据后,进行处理', data)
  }, 500)
})

new Pro(fn => {
  setTimeout(() => {
    let data = 11
    console.log('B拿到数据后,进行处理', data)
    console.log('B将数据传到下一个ajax')
    console.log('B-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) => {
  console.log('B上一个数据是', r)
  setTimeout(() => {
    let data = 22
    console.log('B拿到数据后,进行处理', data)
    console.log('B将数据传到下一个ajax')
    console.log('B-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) => {
  console.log('B上一个数据是', r)
  setTimeout(() => {
    let data = 33
    console.log('B拿到数据后,进行处理', data)
    console.log('B将数据传到下一个ajax')
    console.log('B-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) => {
  console.log('B上一个数据是', r)
  setTimeout(() => {
    let data = 44
    console.log('B拿到数据后,进行处理', data)
  }, 500)
})

复制代码

以下是返回的结果

这里写图片描述

返回成功,A为A的调用栈,B为B的调用栈,没有互相混淆。


关于

make:o︻そ╆OVE▅▅▅▆▇◤(清一色天空)

blog:http://blog.csdn.net/mcky_love

掘金:https://juejin.im/user/59fbe6c66fb9a045186a159a/posts


结束语

成功之后,即可对该类进行二次封装,如工厂模式下,以return对象来实现Promise.all()等方法。所有的实现原理并不一定要以源码来实现,万一你有更好的思路呢?(∩_∩)

文章TAG:promise  简便  实现  代码  【库】Promise的简便实现  

加载全部内容

相关教程
猜你喜欢
大家都在看