JavaScript - 简单说说Promise的那些应用场景

本篇将结合自身使用 ES6 Promise的情况，总结下Promise在我们项目开发中的常见的应用场景，当然，Promise 也许不是唯一选项，但是我们作为一个合格的前端开发人员，我们有必要了解它。

Promise.all

语法：Promise.all（iterable）

参数：一个可迭代对象，如Array。

返回值：

• 如果传递的iterable为空，则是已经解决的Promise。

  Promise.all([]).then(res=>{
       
      console.log(res)//[]
  })
  

• 异步解析的Promise（如果传递的Iterable不包含Promise）。 请注意，在这种情况下，Google Chrome 58返回已解决的承诺。

  Promise.all([1,2,3]).then(res=>{
       
      console.log(res)//[1,2,3]
  })
  

• 当给定可迭代对象中的所有promise已解决，或者任何promise均被拒绝时，此返回的promise将被异步解析/拒绝（堆栈为空时）

  • 当给定可迭代对象中的所有promise 已解决

    let promise1 = new Promise((resolve,reject)=>{
           
        resolve(1)
    })
    let promise2 = new Promise((resolve,reject)=>{
           
        resolve(2)
    })
    
    Promise.all([promise1,promise2,3]).then(res=>{
           
        console.log(res)//[1,2,3]
    })
    

  • 当给定可迭代对象中的任何promise被拒绝时

    let promise1 = new Promise((resolve,reject)=>{
           
        resolve(1)
    })
    let promise2 = new Promise((resolve,reject)=>{
           
        reject(2)
    })
    
    Promise.all([promise1,promise2,3]).then(res=>{
           
        console.log(res)
    }).catch(err=>{
           
        console.log(err)//2
    })
    

  描述：

  此方法对于汇总多个promise的结果很有用，
  在ES6中可以将多个Promise.all异步请求并行操作：

  1.当所有结果成功返回时按照请求顺序返回成功;

  2.当其中有一个失败方法时，则进入失败方法;

  应用场景1：多个请求结果合并在一起

  具体描述：一个页面，有多个请求，我们需求所有的请求都返回数据后再一起处理渲染

  思考：如果并发请求的话，每个请求的loading状态要单独设置，多个的话可能多个loading 重合，页面显示的内容 根据请求返回数据的快慢 有所差异，具体表现在渲染的过程，为提升用户体验，我们可以采用 所有请求返回数据后，再一起渲染，此时我们关闭请求的单独loading设置，通过Promise.all 汇总请求结果，从开始到结束，我们只设置一个 loading 即可。

  //1.获取轮播数据列表
  function getBannerList(){
       
      return new Promise((resolve,reject)=>{
       
          setTimeout(function(){
       
              resolve('轮播数据')
          },300)
      })
  }
  
  //2.获取店铺列表
  function getStoreList(){
       
     return new Promise((resolve,reject)=>{
       
          setTimeout(function(){
       
              resolve('店铺数据')
          },500<