【库】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()等方法。所有的实现原理并不一定要以源码来实现，万一你有更好的思路呢？(∩_∩)