20行实现一个Promise - HelloWorld开发者社区

关注 Vue中文社区，回复“ 加群 ”

加入我们一起学习，天天进步

20行实现一个Promise

作者：晨曦时梦见兮

来源: 掘金

前言

在面试的时候，经常会有面试官让你实现一个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  returnnewPromise(resolve => {    self.onResolvedCallback.push(function() {      var result = onResolved(self.data)      if (result instanceofPromise) {        result.then(resolve)      } else {        resolve(result)      }    })  })}

核心案例

newPromise(resolve => {  setTimeout(() => {    resolve(1)  }, 500)})  .then(res => {    console.log(res)    returnnewPromise(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)}newPromise(excutor)

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

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

then

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

Promise.prototype.then = function(onResolved) {  // 保存上下文，哪个promise调用的then，就指向哪个promise。  var self = this   // 一定要返回一个新的promise  // promise2  returnnewPromise(resolve => {    self.onResolvedCallback.push(function() {      var result = onResolved(self.data)      if (result instanceofPromise) {        // resolve的权力被交给了user promise        result.then(resolve)      } else {        resolve(result)      }    })  })}

再回到案例里

var excutor = resolve => {  setTimeout(() => {    resolve(1)  }, 500)}var promise1 = newPromise(excutor)promise1.then(res => {  console.log(res)  // user promise  returnnewPromise(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 instanceofPromise) {    // 那么直接把promise2的resolve决定权交给了user promise    result.then(resolve)  } else {    resolve(result)  }})

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

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

newPromise(resolve => {  setTimeout(() => {    // resolve1    resolve(1)  }, 500)})  // then1  .then(res => {    console.log(res)    // user promise    returnnewPromise(resolve => {      setTimeout(() => {        // resolve2        resolve(2)      }, 500)    })  })  // then2  .then(console.log)

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

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

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

要点总结

一个核心的要点：

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

// promise1newPromise(resolve => { setTimeout(resolve, 1000)}) // then1 这里传入的函数会被放到调用者promise的回调数组中.then(res => { console.log(res)})

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

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

// 调用then的promisenewPromise(resolve => { setTimeout(resolve, 1000)}) // then2.then(res => { // user promise returnnewPromise(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传入的回调函数

它就被完美的执行了。