Promise的幾個擴展API總結

Promise的幾個擴展API總結

1. Promise.none

描述:

和 Promise.all 相反,當所有的promise被拒絕之後,none方法執行完成的決議,如果存在一個promise執行完成的決議,none方法則執行拒絕

code:

  Promise.none = function(promises) {
    return Promise.all(promises.map(promise => {
      return new Promise((resolve, reject) => {
        // Promise.all裏邊的所有promise實例反過來就好了
        return Promise.resolve(promise).then(reject, resolve)
      })
    }))
  }
  const promisesForNoneTest1= [
    Promise.reject('1'),
    Promise.reject('2'),
    Promise.resolve('3'),
    Promise.reject('4'),
  ]
  Promise.none(promisesForNoneTest1).then(res => {
    debugger
  }, res => {
    debugger // 執行到此
  })

  const promisesForNoneTest2= [
    Promise.reject('1'),
    Promise.reject('2'),
    Promise.reject('3'),
    Promise.reject('4'),
  ]
  Promise.none(promisesForNoneTest2).then(res => {
    debugger // 執行到此
  }, res => {
    debugger 
  })

2. Promise.any

描述:

忽略被拒絕的promise,只需要有一個完成的promise,any方法就執行完成操作,如果全部的promise都被拒絕,any方法執行拒絕操作

code:

  Promise.any = function(promises) {
    const result = []
    return Promise.all(promises.map(promise => {
      // 控制Promise.all處理的所有的promise都執行reslove決議
      return Promise.resolve(promise).then(res => {
        // 但是隻記錄實際上決議爲resolve的結果值
        result.push(res)
      }, () => {
        // 防止穿透,這裏可以進行拒絕信息的返回
      }) 
    })).then(() => {
      return new Promise((resolve, reject) => {
        if (result.length > 0) resolve(result)
        else reject(result)
      })
    })
  }
  const promisesForAnyTest1= [
    Promise.reject('1'),
    Promise.resolve('2'),
    Promise.reject('3'),
    Promise.resolve('4'),
    Promise.resolve('5'),
  ]

  Promise.any(promisesForAnyTest1).then(res => {
    debugger // 執行到此,res 爲 ['2', '4', '5']
  }, res => {
    debugger
  })

  const promisesForAnyTest2= [
    Promise.reject('1'),
    Promise.reject('2'),
    Promise.reject('3'),
    Promise.reject('4'),
    Promise.reject('5'),
  ]

  Promise.any(promisesForAnyTest2).then(res => {
    debugger 
  }, res => {
    debugger // 執行到此
  })

3. Promise.first

描述:

類似race,但是只要有一個promise決議爲完成(忽略前邊被拒絕的promise),就忽略後邊的promise

code:

  Promise.first = function(promises) {
    return new Promise((resolve, reject) => {
      let rejectNum = 0
      promises.forEach(promise => {
        // 如果當前 promise 決議爲reslove,那就直接執行"根promise"的resolve
        // 否則去記錄到拒絕的promise中,然後判斷全部的promise拒絕了,執行"根promise"的reject
        Promise.resolve(promise).then(resolve, () => {
          if (++rejectNum === promises.length) {
            // 這裏可以控制reject返回的信息
            reject()
          }
        })
      })
    })
  }
  const promisesForFirstTest1= [
    Promise.reject('1'),
    Promise.resolve('2'),
    Promise.reject('3'),
    Promise.resolve('4'),
  ]
  Promise.first(promisesForFirstTest1).then(res => {
    debugger // 執行到此,res 爲 '2'
  }, res => {
    debugger
  })

  const promisesForFirstTest2= [
    Promise.reject('1'),
    Promise.resolve('2'),
    Promise.reject('3'),
    Promise.resolve('4'),
  ]
  Promise.first(promisesForFirstTest2).then(res => {
    debugger 
  }, res => {
    debugger // 執行到此
  })

4. Promise.map

描述:

在第二個方法 any 中,用到了Promise.all的方法,裏邊使用Array.prototype.map方法處理了所有的的promise,當前這個Promise.map方法則希望把他倆弄到一起

Promise.map方法希望實現一個處理批量異步操作的並行迭代方法,本質上是利用Promise.all進行二次封裝

code:

  Promise.map = function(promises, resolveCallback, rejectCallback) {
    return Promise.all(promises.map(promise => {
      return Promise.resolve(promise).then(result => {
        return resolveCallback(result)
      }, error => {
        return Promise.reject(rejectCallback(error))
      })
    }))
  }
  const promisesForMapTest1= [
    Promise.resolve('1'),
    Promise.resolve('2'),
    Promise.resolve('3'),
    Promise.resolve('4'),
  ]

  Promise.map(promisesForMapTest1, result => {
    return result * 100
  }, result => {
    return result
  }).then(res => {
    debugger // 執行到此,res爲 [100, 200, 300, 400]
  }, res => {
    debugger
  })

  const promisesForMapTest2= [
    Promise.resolve('1'),
    Promise.resolve('2'),
    Promise.reject('3'),
    Promise.resolve('4'),
  ]

  Promise.map(promisesForMapTest2, result => {
    return result * 100
  }, result => {
    return result
  }).then(res => {
    debugger 
  }, res => {
    debugger // 執行到此,res爲 "3"
  })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章