This Promise implementation only solves the problem of asynchronous nesting, and there are no other methods like All.

I. Class definition stage

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)
    }
  }
}
Copy the code

The code is only about 15 lines, and shorter code is not impossible, but the shorter code has only two possibilities, either easy, or difficulty, this class should be the former, and with the debugger or relatively easy to understand.

Second, call stage

new Pro(fn= > {
  setTimeout((a)= > {
    let data = 1 // The example data is 1
    console.log('A gets the data and processes it. ', data)
    console.log('A passes the data to the next Ajax ')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) = > {
  console.log('A 'the last number was', r)
  setTimeout((a)= > {
    let data = 2
    console.log('A gets the data and processes it. ', data)
    console.log('A passes the data to the next Ajax ')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) = > {
  console.log('A 'the last number was', r)
  setTimeout((a)= > {
    let data = 3
    console.log('A gets the data and processes it. ', data)
    console.log('A passes the data to the next Ajax ')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) = > {
  console.log('A 'the last number was', r)
  setTimeout((a)= > {
    let data = 4
    console.log('A gets the data and processes it. ', data)
  }, 500)})Copy the code

Here are the results returned

This serves the purpose of nesting, and there is no ugly ladder structure in the code.

3. Detection of multiple asynchronous calls

new Pro(fn= > {
  setTimeout((a)= > {
    let data = 1 // The example data is 1
    console.log('A gets the data and processes it. ', data)
    console.log('A passes the data to the next Ajax ')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) = > {
  console.log('A 'the last number was', r)
  setTimeout((a)= > {
    let data = 2
    console.log('A gets the data and processes it. ', data)
    console.log('A passes the data to the next Ajax ')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) = > {
  console.log('A 'the last number was', r)
  setTimeout((a)= > {
    let data = 3
    console.log('A gets the data and processes it. ', data)
    console.log('A passes the data to the next Ajax ')
    console.log('A-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) = > {
  console.log('A 'the last number was', r)
  setTimeout((a)= > {
    let data = 4
    console.log('A gets the data and processes it. ', data)
  }, 500)})new Pro(fn= > {
  setTimeout((a)= > {
    let data = 11
    console.log('B gets the data and processes it. ', data)
    console.log('B passes the data to the next Ajax ')
    console.log('B-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) = > {
  console.log('B 'was the last number., r)
  setTimeout((a)= > {
    let data = 22
    console.log('B gets the data and processes it. ', data)
    console.log('B passes the data to the next Ajax ')
    console.log('B-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) = > {
  console.log('B 'was the last number., r)
  setTimeout((a)= > {
    let data = 33
    console.log('B gets the data and processes it. ', data)
    console.log('B passes the data to the next Ajax ')
    console.log('B-------------')
    fn.then(data)
  }, 500)
}).then((fn, r) = > {
  console.log('B 'was the last number., r)
  setTimeout((a)= > {
    let data = 44
    console.log('B gets the data and processes it. ', data)
  }, 500)})Copy the code

Here are the results returned

Return success, A is A’s call stack, B is B’s call stack, not confused with each other.

about

Make: o sof f OVE▅▅▅▆ tune Tune Sky

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

The Denver nuggets: https://juejin.cn/user/1996368846268334

conclusion

Once successful, the class can be rewrapped, such as in factory mode, using return objects to implement methods such as promise.all (). All implementation principles do not have to be implemented in source code, in case you have a better idea? (studying studying)