手寫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)
})
}
}
}
//應用
const test = 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)
})
}
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/304955.html
標籤：其他
上一篇：Python基礎之數字化大屏