zoukankan      html  css  js  c++  java
  • Promise.all方法和Promise.race方法

    Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

    var p = Promise.all([p1,p2,p3]);

    Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

    上面代码中,Promise.all 方法接受一个数组作为参数,p1、p2、p3 都是 Promise 对象的实例。(Promise.all 方法的参数不一定是数组,但是必须具有 iterator 接口,且返回的每个成员都是 Promise 实例。)

    p 的状态由 p1、p2、p3 决定,分成两种情况。

    • (1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
    • (2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时最先被reject的实例的返回值,会传递给p的回调函数。看下面的一个例子

    Promse.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示,在此之前只显示loading图标。

    需要特别注意的是,Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的,即p1的结果在前,即便p1的结果获取的比p2要晚。这带来了一个绝大的好处:在前端开发请求数据的过程中,偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景,使用Promise.all毫无疑问可以解决这个问题。

    Promise.race 方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。

    var p = Promise.race([p1,p2,p3]);

    上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就改变了。不管结果本身是成功状态还是失败状态。那个率先改变的Promise实例的返回值,就传递给p的返回值。与数组里的顺序无关

    let p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('success1')
      },1000)
    })
    
    let p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('failed')
      }, 500)
    })
     let p3 = new Promise((resolve, reject) => {
       setTimeout(() => {
        resolve('success2')
        }, 400)
     })
     Promise.race([p1, p2]).then((result) => {
      console.log(result)
    }).catch((error) => {
      console.log(error)  // 打印的是 'failed'
    })
     Promise.race([p2, p3]).then((result) => {
      console.log(result)
    }).catch((error) => {
      console.log(error)  // 打印的是 'success2'
    })
     Promise.race([p1, p3]).then((result) => {
      console.log(result)
    }).catch((error) => {
      console.log(error)  // 打印的是 'success2'
    })
     Promise.race([p3, p1]).then((result) => {
      console.log(result)
    }).catch((error) => {
      console.log(error)  // 打印的是 'success2'
    })

    如果Promise.all方法和Promise.race方法的参数,不是Promise实例,就会先调用讲到的Promise.resolve方法,将参数转为Promise实例,再进一步处理。

  • 相关阅读:
    Smobiler 仿知乎APP个人主页
    smobiler仿自如app筛选页面
    Smobiler 仿美柚APP个人主页
    谈谈网络协议 – 物理层
    谈谈网络协议 – 路由
    谈谈网络协议 – 基础知识
    Flutter(三):Flutter App 可行性分析
    Flutter(二):编写第一个Flutter App
    Flutter(一):MAC的Flutter安装指南
    Jetpack新成员,Paging3从吐槽到真香
  • 原文地址:https://www.cnblogs.com/zienlove/p/14793710.html
Copyright © 2011-2022 走看看