资讯专栏INFORMATION COLUMN

Promise的几个扩展API总结

李义 / 1828人阅读

摘要:的几个扩展总结描述和相反,当所有的被拒绝之后,方法执行完成的决议,如果存在一个执行完成的决议,方法则执行拒绝里边的所有实例反过来就好了执行到此执行到此描述忽略被拒绝的,只需要有一个完成的,方法就执行完成操作,如果全部的都被拒绝,方法执行拒绝

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"
  })

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

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

相关文章

  • 前端面试知识点目录整理

    摘要:写在前面金三银四又到了一年一度的跳槽季相信大家都在准备自己面试笔记我也针对自己工作中所掌握或了解的一些东西做了一个目录总结方便自己复习详细内容会在之后一一对应地补充上去有些在我的个人主页笔记中也有相关记录这里暂且放一个我的面试知识点目录大家 写在前面: 金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自...

    xzavier 评论0 收藏0
  • 前端面试知识点目录整理

    摘要:写在前面金三银四又到了一年一度的跳槽季相信大家都在准备自己面试笔记我也针对自己工作中所掌握或了解的一些东西做了一个目录总结方便自己复习详细内容会在之后一一对应地补充上去有些在我的个人主页笔记中也有相关记录这里暂且放一个我的面试知识点目录大家 写在前面: 金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自...

    enda 评论0 收藏0
  • 前端知识归纳

    摘要:继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中,在垂直方向上的会发生重叠。 技能考察: 一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时 让浏览器的爬虫和...

    sixleaves 评论0 收藏0
  • 前端知识归纳

    摘要:继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中,在垂直方向上的会发生重叠。 技能考察: 一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时 让浏览器的爬虫和...

    NotFound 评论0 收藏0
  • 前端知识归纳

    摘要:继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中,在垂直方向上的会发生重叠。 技能考察: 一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时 让浏览器的爬虫和...

    Cciradih 评论0 收藏0

发表评论

0条评论

李义

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<