java 接口调用promise_最简实现Promise,支持异步链式调用(20行)

前言

在面试的时候,经常会有面试官让你实现一个Promise,如果参照A+规范来实现的话,可能面到天黑都结束不了。

说到Promise,我们首先想到的最核心的功能就是异步链式调用,本篇文章就带你用20行代码实现一个可以异步链式调用的Promise。

这个Promise的实现不考虑任何异常情况,只考虑代码最简短,从而便于读者理解核心的异步链式调用原理。

代码

先给代码吧,真就20行。

function Promise(excutor){

var self = this

self.onResolvedCallback = []

function resolve(value){

setTimeout(() => {

self.data = value

self.onResolvedCallback.forEach(callback => callback(value))

})

}

excutor(resolve.bind(self))

}

Promise.prototype.then = function(onResolved){

var self = this

return new Promise(resolve => {

self.onResolvedCallback.push(function(){

var result = onResolved(self.data)

if (result instanceof Promise) {

result.then(resolve)

} else {

resolve(result)

}

})

})

}

复制代码

核心案例

new Promise(resolve => {

setTimeout(() => {

resolve(1)

}, 500)

})

.then(res => {

console.log(res)

return new Promise(resolve => {

setTimeout(() => {

resolve(2)

}, 500)

})

})

.then(console.log)

复制代码

本文将围绕这个最核心的案例来讲,这段代码的表现如下:

500ms后输出1

500ms后输出2

实现

构造函数

首先来实现Promise构造函数

function Promise(excutor){

var self = this

self.onResolvedCallback = [] // Promise resolve时的回调函数集

// 传递给Promise处理函数的resolve

// 这里直接往实例上挂个data

// 然后把onResolvedCallback数组里的函数依次执行一遍就可以

function resolve(value){

// 注意promise的then函数需要异步执行

setTimeout(() => {

self.data = value

self.onResolvedCallback.forEach(callback => callback(value))

})

}

// 执行用户传入的函数

excutor(resolve.bind(self))

}

复制代码

好,写到这里先回过头来看案例

const excutor = resolve => {

setTimeout(() => {

resolve(1)

}, 500)

}

new Promise(excutor)

复制代码

分开来看,excutor就是用户传的函数,这个函数内部调用了resolve函数后,就会把promise实例上的onResolvedCallback执行一遍。

到此为止我们还不知道onResolvedCallback这个数组里的函数是从哪里来的,接着往下看。

then

这里是最重要的then实现,链式调用全靠它:

Promise.prototype.then = function(onResolved){

// 保存上下文,哪个promise调用的then,就指向哪个promise。

var self = this

// 一定要返回一个新的promise

// promise2

return new Promise(resolve => {

self.onResolvedCallback.push(function(){

var result = onResolved(self.data)

if (result instanceof Promise) {

// resolve的权力被交给了user promise

result.then(resolve)

} else {

resolve(result)

}

})

})

}

复制代码

再回到案例里

var excutor = resolve => {

setTimeout(() => {

resolve(1)

}, 500)

}

var promise1 = new Promise(excutor)

promise1.then(res => {

console.log(res)

// user promise

return new Promise(resolve => {

setTimeout(() => {

resolve(2)

}, 500)

})

})

复制代码

注意这里的命名:

我们把Promise构造函数返回的实例叫做promise1,

在then的实现中,我们构造了一个新的promise返回,叫它promise2

在用户调用then方法的时候,用户手动构造了一个promise用来做异步的操作,叫它user promise

那么在then的实现中,self其实就指向promise1

而promise2的excutor中,立刻执行了一个函数,它往promise1的onResolvedCallback数组中push了一个函数,

那么重点看这个push的函数,注意,这个函数在promise1被resolve了以后才会执行。

self.onResolvedCallback.push(function(){

// onResolved就对应then传入的函数

var result = onResolved(self.data)

// 例子中的情况 返回了一个promise3

if (result instanceof Promise) {

// 那么直接把promise2的resolve决定权交给了user promise

result.then(resolve)

} else {

resolve(result)

}

})

复制代码

如果用户传入给then的onResolved方法返回的是个promise,那么这个user promise里拿到的参数resolve,其实就指向了内部promise2的resolve,

所以这就可以做到:user promise被resolve以后,then2函数才会继续执行,

new Promise(resolve => {

setTimeout(() => {

// resolve1

resolve(1)

}, 500)

})

// then1

.then(res => {

console.log(res)

// user promise

return new Promise(resolve => {

setTimeout(() => {

// resolve2

resolve(2)

}, 500)

})

})

// then2

.then(console.log)

复制代码

then1其实进入了promise1的回调数组里,所以resolve1执行完毕后,then1才会执行

then2其实进入了promise2的回调数组里,又因为我们刚刚知道,resolve2正是promise2的resolve方法,

所以resolve2执行完毕后, then2才会执行,这就实现了异步的链式调用。

要点总结

一个核心的要点:

简单情况 then1函数是个同步函数,返回一个普通的值。 then1里传入的函数,其实是被放到promise1的回调数组里,

// promise1

new Promise(resolve => {

setTimeout(resolve, 1000)

})

// then1 这里传入的函数 会被放到调用者promise的回调数组中

.then(res => {

console.log(res)

})

复制代码

这样的话,1秒后,promise1被resolve了,是不是then1里的函数就被执行了呢~

复杂情况 then函数返回了个promise 如果这个then函数里返回了一个promise,那么这个返回的promise内部的resolve,其实就指向

// 调用then的promise

new Promise(resolve => {

setTimeout(resolve, 1000)

})

// then2

.then(res => {

// user promise

return new Promise(resolve => {

setTimeout(resolve, 1000)

})

})

// then3

.then(res => {

console.log(res)

})

复制代码

then2会返回promise2(注意不是user promise,而是源码内部返回的那个promise2),

then3传入的函数会被放到promise2的回调数组里。

由于then2中用户自己返回了一个user promise,

所以promise2的resolve权力会被交给user promise,

在1秒后,user promise被resolve了,那么代表着promise2被reoslve了,那么在promise2的回调数组里会找到then3传入的回调函数

它就被完美的执行了。

文章总结

本文只是简单实现一个可以异步链式调用的promise,而真正的promise比它复杂很多很多,涉及到各种异常情况、边界情况的处理。

promise A+规范还是值得每一个合格的前端开发去阅读的。

希望这篇文章可以对你有所帮助!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值