自己动手实现一个Promise

Yujiaao 发布于2019-08-26 13:32 / 3343人阅读

摘要：意味着操作成功完成。状态的对象可能触发状态并传递一个值给相应的状态处理方法，也可能触发失败状态并传递失败信息。测试用例测试用例方法返回一个带有拒绝原因参数的对象。

Promise基本用法

Promise 对象是一个代理对象，被代理的值在Promise对象创建时可能是未知的。

它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象

一个 Promise有以下几种状态:

</>复制代码 
pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

pending 状态的 Promise 对象可能触发fulfilled 状态并传递一个值给相应的状态处理方法，也可能触发失败状态（rejected）并传递失败信息。当其中任一种情况出现时，Promise 对象的 then 方法绑定的处理方法（handlers ）就会被调用（then方法包含两个参数：onfulfilled 和 onrejected，它们都是 Function 类型。当Promise状态为fulfilled时，调用 then 的 onfulfilled 方法，当Promise状态为rejected时，调用 then 的 onrejected 方法，所以在异步操作的完成和绑定处理方法之间不存在竞争）。

因为 Promise.prototype.then 和 Promise.prototype.catch 方法返回promise 对象，所以它们可以被链式调用。

</>复制代码 
var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("foo");
  }, 300);
});
promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});
console.log(promise1);
// expected output: [object Promise]

Promise/A+

然后我们来了解一下Promise规范
Promises/A+规范（英文版）
Promises/A+规范（中文版）

Promise的实现

Promise是通过new创建的，可以通过构造函数模式或者是ES6的class来实现，这儿选择构造函数的方式来实现Promise，首先先完成一个简易版本的Promise。

</>复制代码 
function Promise(exector) {
    var _this = this
    this.status = "pending"
    this.value = undefined
    try {
      exector(resolve, reject)
    }catch(e) {
      reject(e)
    }
    function resolve(value) {
      if(_this.status === "pending") {
        _this.status = "fulfilled"
        _this.value = value
      }
    }
    function reject(value) {
      if(_this.status === "pending") {
        _this.status = "rejected"
        _this.value = value
      }
    }
  }
  Promise.prototype.then = function(resolveCallback, rejectCallback) {
    if(this.status === "fulfilled") {
      resolve(this.value)
    }
    if(this.status === "rejected") {
      reject(this.value)
    }
  }
  new Promise((resolve, reject)=> {
    resolve("1")
  }).then((data)=> {
    console.log("resolve" + data)
  }, (data)=> {
    console.log("reject" + data)
  }) //resolve1
  new Promise((resolve, reject)=> {
    setTimeout(()=> {
      resolve("1")
    }, 1000)
  }).then((data)=> {
    console.log("resolve" + data)
  }, (data)=> {
    console.log("reject" + data)
  }) //无法正常输出

上面这个promise中resolve和reject在同步的情况下都能正常输出，但是现在却不支持异步，因为在异步的时候调用then的时候状态还是"pending"，所以resolve/reject并不能如期执行。

这个时候就需要一个存放后续调用事件的数组，当异步函数执行完毕后再执行数组中的函数。

改进后异步方法可以正常运行：

</>复制代码 
function Promise(exector) {
    var _this = this
    this.status = "pending"
    this.value = undefined
    this.resolveList = []
    this.rejectList = []
    try {
      exector(resolve, reject)
    }catch(e) {
      reject(e)
    }
    function resolve(value) {
      if(_this.status === "pending") {
        _this.status = "fulfilled"
        _this.value = value
        _this.resolveList.forEach(item=> {
          item(_this.value)
          _this.resolveList.shift()
        })
      }
    }
    function reject(value) {
      if(_this.status === "pending") {
        _this.status = "rejected"
        _this.value = value
        _this.rejectList.forEach(item=> {
          item(_this.value)
          _this.rejectList.shift()
        })
      }
    }
  }
  Promise.prototype.then = function(resolveCallback, rejectCallback) {
    if(this.status === "fulfilled") {
      resolve(this.value)
    }
    if(this.status === "rejected") {
      reject(this.value)
    }
    if(this.status === "pending") {
      this.resolveList.push(resolveCallback)
      this.rejectList.push(rejectCallback)
    }
  }
  new Promise((resolve, reject)=> {
    setTimeout(()=> {
      resolve("1")
    }, 1000)
  }).then((data)=> {
    console.log("resolve" + data)
  }, (data)=> {
    console.log("reject" + data)
  })

链式调用

我们可以注意到Promise是可以链式调用的，这就需要then的方法返回一个Promise对象。

下面是一个链式调用的简单例子：

</>复制代码 
let promise = new Promise((resolve, reject)=> {
  resolve(666)
})
promise.then(data=> {
  console.log(data)
  return data + 1
}).then(data=> {
  console.log(data)
})
//666
//667

在Promise链中返回Promise：

</>复制代码 
let promise1 = new Promise((resolve, reject)=> {
  resolve(666)
})
let promise2 = new Promise((resolve, reject)=> {
  resolve(999)
})
promise1.then(data=> {
  console.log(data)
  return promise2
}).then(data=> {
  console.log(data)
})
//666
//999

关于这种写法需要注意的是，第二个完成处理程序被添加到第三个promise而不是return的promise2，上面的例子等价于：

</>复制代码 
let promise1 = new Promise((resolve, reject)=> {
  resolve(666)
})
let promise2 = new Promise((resolve, reject)=> {
  resolve(999)
})
let promise3 = promise1.then(data=> {
  console.log(data)
  return promise2
})
promise3.then(data=> {
  console.log(data)
})
//666
//999

当异步的时候调用then函数的时候状态为pending,这个时候同样需要返回一个promise方便后续的链式调用。

所以修改为链式调用后的代码为：

</>复制代码 
function Promise(exector) {
  var _this = this
  this.status = "pending"
  this.value = undefined
  this.resolveList = []
  this.rejectList = []
  try {
    exector(resolve, reject)
  }catch(e) {
    reject(e)
  }
  function resolve(value) {
    if(_this.status === "pending") {
      _this.status = "fulfilled"
      _this.value = value
      _this.resolveList.forEach(item=> {
        item(_this.value)
        _this.resolveList.shift()
      })
    }
  }
  function reject(value) {
    if(_this.status === "pending") {
      _this.status = "rejected"
      _this.value = value
      _this.rejectList.forEach(item=> {
        item(_this.value)
        _this.rejectList.shift()
      })
    }
  }
}
Promise.prototype.then = function(resolveCallback, rejectCallback) {
  var _this = this
  if(this.status === "fulfilled") {
    return new Promise((resolve, reject)=> {
      var result = resolveCallback(_this.value)
      if(result instanceof Promise) {
        result.then(resolve, reject)
      }else {
        resolve(result)
      }
    })
  }
  if(this.status === "rejected") {
    return new Promise((resolve, reject)=> {
      var result = rejectCallback(_this.value)
      if(result instanceof Promise) {
        result.then(resolve, reject)
      }else {
        reject(result)
      }
    })
  }
  if(this.status === "pending") {
    return new Promise((resolve, reject)=> {
      _this.resolveList.push(function() {
        var result = resolveCallback(_this.value)
        if(result instanceof Promise) {
          result.then(resolve, reject)
        }else {
          resolve(result)
        }
      })
      _this.rejectList.push(function() {
        var result = rejectCallback(_this.value)
        if(result instanceof Promise) {
          result.then(resolve, reject)
        }else {
          reject(result)
        }
      })
    })
  }
}
new Promise((resolve, reject)=> {
  resolve(666)
}).then((data)=> {
  console.log("resolve1:" + data)
  return 999
}).then((data)=> {
  console.log("resolve2:" + data)
})
//resolve1: 666
//resolve2: 999
new Promise((resolve, reject)=> {
  resolve(666)
}).then((data)=> {
  console.log("resolve1:" + data)
  return new Promise((resolve, reject)=> {
    resolve(999)
  })
}).then((data)=> {
  console.log("resolve2:" + data)
})
//resolve1: 666
//resolve2: 999

基本的功能已经实现，下面开始实现Promise的all,race,resolve,reject方法，链式调用部分思路借鉴Promise/A+规范的实现

Promise.all()

该方法只接受一个有多个受监听的Promise的可迭代对象（比如数组），只有当可迭代对中所有Promise都被解决后才会返回resolve，如果参数中 promise 有一个失败，此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。

</>复制代码 
Promise.all = function(iterable) {
  return new Promise((resolve, reject) => {
    let result = []
    for(const item of iterable) {
      item.then(data => {
        result.push(data)
      }, reason=> {
        result = reason
        return
      })
    }
    resolve(result)
  })
}
//下面是测试用例
let p1 = new Promise((resolve, reject) => {
  resolve(666)
})
let p2 = new Promise((resolve, reject) => {
  resolve(888)
})
let p3 = new Promise((resolve, reject) => {
  resolve(999)
})
let p6 = new Promise((resolve, reject) => {
  reject(222)
})
let p4 = Promise.all([p1, p2, p3])
p4.then(data => {
  console.log(data)
})
//[666, 888, 999]
let p7 = Promise.all([p1, p3, p6])
p7.then(data => {
  console.log(data)
})
//222

Promise.race()

Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

</>复制代码 
Promise.race = function(iterable) {
  return new Promise((resolve, reject) => {
    for(const item of iterable) {
      item.then(data => {
        resolve(data)
      }, reason=> {
        reject(reson)
      })
    }
  })
}
//测试用例
var p1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, "one");
});
var p2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, "two");
});
Promise.race([p1, p2]).then(function(value) {
  console.log(value);
  // Both resolve, but promise2 is faster
});
//two

Promise.resolve()

</>复制代码 
Promise.resolve = function(data) {
  return new Promise((resolve, reject) => {
    resolve(data)
  })
}
//测试用例
var p1 = Promise.resolve(123);
p1.then(function(value) {
  console.log(value);
});
//123

Promise.reject()

Promise.reject(reason)方法返回一个带有拒绝原因reason参数的Promise对象。

</>复制代码 
Promise.resolve = function(data) {
  return new Promise((resolve, reject) => {
    reject(data)
  })
}

GPU云服务器云服务器自己动手写爬虫自己动手写网路爬虫自己动手写网络爬虫自己动手写开发工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108992.html

自己动手，为vue写一个jsonp的方法

摘要：它之后能够被使用到很多场景中其他处理请求和响应的方式，甚至任何需要生成自己的响应的方式。总结到这里都讲完了，其实没什么难度，主要是自己项目中遇到了，但是中没有这个方法啊。所以就想着实现了一个，因为其他的方法也都封装，不差这一个了。 Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象通用的定义。它之后能够被使用到很多场景中：service wor...

dongxiawu 2019-08-21 15:02 评论0 收藏0
动手搞一个Promise

摘要：一个后可以通过方法，指定和时的回调函数。构造函数内部要有一个值，用来保存上次执行的结果值，如果报错，则保存的是异常信息。因为是一个构造函数，使用的写法，首先想到的就是有显式声明的。 showImg(https://segmentfault.com/img/bVbffEu?w=530&h=253); Javascript语言的执行环境是单线程（single thread）。所谓单线程，就...

shadajin 2019-08-29 16:22 评论0 收藏0
动手搞一个Promise

摘要：一个后可以通过方法，指定和时的回调函数。构造函数内部要有一个值，用来保存上次执行的结果值，如果报错，则保存的是异常信息。因为是一个构造函数，使用的写法，首先想到的就是有显式声明的。 showImg(https://segmentfault.com/img/bVbffEu?w=530&h=253); Javascript语言的执行环境是单线程（single thread）。所谓单线程，就...

NervosNetwork 2019-08-02 11:14 评论0 收藏0
解析 Promise 原理，实现一个Promise

摘要：解析原理，实现一个概述这篇文章旨在解析的异步实现原理，并且以中的为蓝本实现一个简单的。具体的规范可以参见细节构造器中必须传入函数，否则会抛出错误。中的回调返回值会影响返回的对象。执行器传入构造器的为函数，并且在构造时就会执行。解析 Promise 原理，实现一个Promise 概述这篇文章旨在解析 Promise的异步实现原理，并且以 ES6中的 Promise 为蓝本实现一个简单...

silenceboy 2019-08-22 11:11 评论0 收藏0

发表评论

登陆后可评论

0条评论

Yujiaao

男|高级讲师

我要关注我要私信

TA的文章

为什么论坛网站都喜欢部署香港云服务器？原因有4点！

阅读 2402·2021-11-22 13:54
浅谈px,em与rem

阅读 3457·2019-08-29 12:25
【CSS深入】设置不同块级流方向时的属性百分比计算

阅读 3529·2019-08-28 18:29
Javascript混淆与解混淆的那些事儿

阅读 3682·2019-08-26 13:40
自己动手实现一个Promise

阅读 3344·2019-08-26 13:32
jQuery实现平滑滚动到指定锚点的方法

阅读 1078·2019-08-26 11:44
前端部分知识总结

阅读 2313·2019-08-23 17:04
解密 Design System

阅读 3048·2019-08-23 17:02

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

自己动手实现一个Promise

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

自己动手，为vue写一个jsonp的方法

动手搞一个Promise

动手搞一个Promise

解析 Promise 原理，实现一个Promise

发表评论

0条评论

Yujiaao

男|高级讲师

TA的文章

为什么论坛网站都喜欢部署香港云服务器？原因有4点！

浅谈px,em与rem

【CSS深入】设置不同块级流方向时的属性百分比计算

Javascript混淆与解混淆的那些事儿

自己动手实现一个Promise

jQuery实现平滑滚动到指定锚点的方法

前端部分知识总结

解密 Design System

最新活动