【promise-05】promise.all()与promise.race()

#promise.all()与promise.race()

Promise.all()方法可以把多个promise实例 包装成一个新的promise实例

Promise.all([ promise1, promise2 ]): Promise.all()接收的是一个数组，数组中的每一项都是promise实例，最终返回的也是一个promise实例。

它分三种情况：

1. 如果数组中的所有实例都决议为成功的话，这时候promise.all()就会决议为成功，并且所有这里promise的resolve带的参数都会组合成一个数组传递给我们，且顺序一一对应。

function getData1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第一条数据加载成功');
      resolve('data1');
    }, 1000);
  });
}

function getData2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第二条数据加载成功');
      resolve('data2');
    }, 1000);
  });
}

function getData3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第三条数据加载成功');
      resolve('data3');
    }, 1000);
  });
}

function getData4() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第四条数据加载成功');
      resolve('data4');
    }, 500);
  });
}

let p = Promise.all([getData1(),getData2(),getData3(),getData4()]);

//arr 为promise数组所返回的数组
p.then(arr => {
  console.log(arr); 
});

console.log(arr); 结果为["data1","data2","data3","data4"]

2. 当数组中有任意一个promise决议为失败的时候，那promise.all()就会决议为失败，并且把决议为失败的promise的错误在传递过来

例如getData4()是错误的：

function getData4() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // console.log('第四条数据加载成功');
      reject('data4 err');
    }, 500);
  });
}

let p = Promise.all([getData1(),getData2(),getData3(),getData4()]);

p.then(arr => {
  console.log(arr); 
}, e => {
  console.log(e);
});

这里的promise实例直接决议为失败，并且吧getData4中reject传递的信息传递了回来。 console.log(e);打印的就是 ‘data4 err’。

3. 当数组为空promise.all()就会决议为成功

let p = Promise.all([]);

p.then(() => {
  console.log('dfsafd');
}, e => {
  console.log(e);
});

---

promise.race()

与promise.all对应的race方法接收的也是一个数组，里面也都是promise实例，与all方法不同的是，race里面，只要有一个promise决议为成功或者失败，这个promise.race()返回的promise实例，也会是对应的成功或者失败，并把值传递过来。
Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回哪个结果，不管结果本身是成功状态还是失败状态

我们把getData1()的定时器改为半秒,

function getData1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第一条数据加载失败');
      reject('err');
    }, 500);
  });
}

function getData2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第二条数据加载成功');
      resolve('data2');
    }, 1000);
  });
}

function getData3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第三条数据加载成功');
      resolve('data3');
    }, 1000);
  });
}

let p = Promise.race([getData1(),getData2(),getData3()]);

p.then(data => {
    console.log(data);
}, e => {
    console.log(e); 
})

我们会立即输出err，输出结果为

第一条数据加载失败
err
第二条数据加载成功
第三条数据加载成功

需要注意的是，promise.race()接收空数组的话，什么反应也不会有。