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