javascript|手写promise，promise.all，promise.race
手写promise
//手写promise
const RESOLVE = 'resolved';
//成功状态
const REJECT = 'rejected'//失败状态
const PENDING = 'Pending'//等待状态class MyPromise {
status = PENDING;
result = undefined
reason = undefined
onResolvedArr = []
onRejectArr = []
constructor(excution) {//promise中传入一个函数，我们定义一个excution函数
//定义resolve与reject两个参数
const resolve =(result) =>{//resolve中传入参数result
if(this.status === PENDING){//promise中状态改变不可逆向，只能从PENDING转为RESOLVE或者PENDING转为REJECT
this.result = result
this.status = RESOLVE
this.onResolvedArr.map((fn)=>fn())
}
}
const reject =(reason) =>{//reject传入参数reason
if (this.status === PENDING){
this.reason = reason
this.status = REJECT
this.onRejectArr.map((fn)=>fn())
}}
excution(resolve,reject)//传入reslove，reject 2个参数
}
//传入promise的then方法
then(onResoved,onRejected){
if (this.status === RESOLVE){
//利用settimeout把任务变为异步任务
setTimeout(()=>{
onResoved(this.result)
},0)}
if (this.status === REJECT){
setTimeout(()=>{
onRejected(this.reason)
},0)
}
//加入promise中传入一个异步的函数，通过发布订阅模式来实现监听
if(this.status === PENDING){
this.onResolvedArr.push(() => {
onResoved(this.result)
})
this.onRejectArr.push(() => {
onRejected(this.reason)
})
}
}
}
//应用
consttest = new MyPromise((resolve,reject)=>{
setTimeout(()=>{
resolve('hello world')
},1000)
})
test.then((res) => {
console.log(res)
})
console.log(1111)手写promise.all
Promise.all = function (iterator) {//promise.all传入的为一个迭代器
const promises = Array.from(iterator)//将迭代器转化成数组
let count = 0
let res = []//储存结果
return new Promise((resolve,reject)=>{//promise.all返回一个promise对象
for (let i in promises){//对传入的数据进行遍历
Promise.resolve(promises[i])//将传入的数据每个都转化成promise对象
.then((data)=>{
res[i] = data//调用成功存入res中
if (++count === promises.length){//每次调用成功累加count，当count等于promises的长度，就表明每次都调用成功
resolve(res)//则返回resolve
}
})
.catch((e)=>{//当count不等于promises的长度则表示其中有失败的调用，则放回reject
reject(e)
})
}
})
}手写promise.race（与all同理，不需要判断）
Promise.race = function (iterator) {
const promises = Array.from(iterator)
return new Promise((resolve,reject) => {
for (let i in promises) {
Promise.resolve(promises[i])
.then((res) => {
resolve(res)
})
.catch(e => {
reject(e)
})
}})
}
【javascript|手写promise，promise.all，promise.race】
推荐阅读
- 事件代理
- 数组常用方法一
- 使用Promise对微信小程序wx.request请求方法进行封装
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 从如何使用到如何实现一个Promise
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- 【读书笔记】JavaScript|【读书笔记】JavaScript DOM编程艺术 （第2版）