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

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月12日18:26:49 评论 405

该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)
})

复制代码

以下是返回的结果

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

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


三、多异步调用检测

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)
})

复制代码

以下是返回的结果

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

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


关于

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

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

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


结束语

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

im, 无色
  • 本文由 发表于 2019年7月12日18:26:49
2019 年最好用的 JavaScript 图表库 JavaScript

2019 年最好用的 JavaScript 图表库

作者:Saurabh Barot 翻译:王强 大数据时代,收集和使用数据的需求正在爆发式增长,数据可视化也变得愈加重要。开发人员在想方设法将不同数据库中的记录整合到仪表板和漂亮的图表中,向人们快速直观...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: