美文网首页
Promise.all 和 Promise.race

Promise.all 和 Promise.race

作者: 弱冠而不立 | 来源:发表于2021-03-10 18:41 被阅读0次

    Promise.all的使用

    • Promise.all() 方法接收一个promise的 iterable (可迭代,例如Array, Set, Map)类型
    • resolve回调的结果是一个数组,且这个回调是在所有输入的promise的resolve回调都结束时执行,或者输入的可迭代类型里没有promise了的时候
    • reject回调执行是只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误。并且reject的是第一个抛出的错误信息。
    • 且回调的顺序是和输入的顺序有关,即使后面的更快,在回调时的结果还是严格按照输入的顺序来的。

    例:

    const promise1 = new Promise((resolve, reject) => {
        setTimeout(resolve, 500, 'one');
      });
      
      const promise2 = new Promise((resolve, reject) => {
        setTimeout(resolve, 300, 'two');
      });
      
      const promise3 = new Promise((resolve, reject) => {
        setTimeout(reject, 400, 'three');
      });
    
        
      const promise4 = new Promise((resolve, reject) => {
        setTimeout(reject, 500, 'four');
      });
    
    
    Promise.all([promise1, promise2, promise3]).then((values) => {
      console.log(values);
    });
    // [ 'one', 'two' ],即使 two 比 one 先 resolve
    
      Promise.all([promise1, promise2, promise3, promise4]).then((value) => {
        console.log(value);
      }).catch(err=>console.log(err));
    // three,只要有一个抛出错误了
    
    使用场景

    例如,有些页面需要请求多个接口渲染数据,而且希望全部请求完再一起渲染。这个时候就可以使用 .all 去批量请求了。
    实现一个函数实现最大的请求控制数

    Promise.race

    • 接收一个promise的 iterable (可迭代,例如Array, Set, Map)类型
    • 一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。

    简单来说就是:无论完成还是拒绝,只要谁的状态先确定了谁就回调谁
    例如:实现一个函数来处理请求超时

    例如:

    const promise1 = new Promise((resolve, reject) => {
      setTimeout(resolve, 500, 'one');
    });
    
    const promise2 = new Promise((resolve, reject) => {
      setTimeout(resolve, 300, 'two');
    });
    
    const promise3 = new Promise((resolve, reject) => {
      setTimeout(reject, 100, 'three');
    });
    
    Promise.race([promise1, promise2]).then((value) => {
      console.log(value);
      // 两个都resolve了,但是 promise2 更快
    });
    
      Promise.race([promise1, promise2, promise3]).then((value) => {
        console.log(value);
      }).catch(err=>console.log(err));
      //  promise3 更快地 转变为 rejected 状态,所以走了 .catch
    
    使用场景
    • 有个接口要请求,但是要判断是否超时,所以就可以把接口和setTimeout一起放进 .race 中。如果setTimeout 执行了,请求还未执行,就可以通过 setTimeout 去告知用户
    • 有多个接口分别部署在不同的服务器,但都是同一个功能。这个时候也可以用 .race 谁先最快地返回就执行谁的回调。

    相关文章

      网友评论

          本文标题:Promise.all 和 Promise.race

          本文链接:https://www.haomeiwen.com/subject/smkoqltx.html