本篇将结合自身使用 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将被异步解析/拒绝（堆栈为空时）
1. 当给定可迭代对象中的所有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]})
2..当给定可迭代对象中的任何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) })}//3.获取分类列表function getcategorylist(){ return new promise((resolve,reject)=>{ settimeout(function(){ resolve('分类数据') },700) })}function initload(){ // loading.show() //加载loading promise.all([getbannerlist(),getstorelist(),getcategorylist()]).then(res=>{ console.log(res) // loading.hide() //关闭loading }).catch(err=>{ console.log(err) // loading.hide()//关闭loading })}//数据初始化 initload()
应用场景2：合并请求结果并处理错误
描述：我们需求单独处理一个请求的数据渲染和错误处理逻辑，有多个请求，我们就需要在多个地方写
思考：我们能否把多个请求合并在一起，哪怕有的请求失败了，也返回给我们，我们只需要在一个地方处理这些数据和错误的逻辑即可。
//1.获取轮播图数据列表function getbannerlist(){ return new promise((resolve,reject)=>{ settimeout(function(){ // resolve('轮播图数据') reject('获取轮播图数据失败啦') },300) })}//2.获取店铺列表function getstorelist(){ return new promise((resolve,reject)=>{ settimeout(function(){ resolve('店铺数据') },500) })}//3.获取分类列表function getcategorylist(){ return new promise((resolve,reject)=>{ settimeout(function(){ resolve('分类数据') },700) })}function initload(){ // loading.show() promise.all([ getbannerlist().catch(err=>err), getstorelist().catch(err=>err), getcategorylist().catch(err=>err) ]).then(res=>{ console.log(res) // ["获取轮播图数据失败啦", "店铺数据", "分类数据"] if(res[0] == '轮播图数据'){ //渲染 }else{ //获取 轮播图数据 失败的逻辑 } if(res[1] == '店铺数据'){ //渲染 }else{ //获取 店铺列表数据 失败的逻辑 } if(res[2] == '分类数据'){ //渲染 }else{ //获取 分类列表数据 失败的逻辑 } // loading.hide() })}initload()
有时候页面挂掉了，可能因为接口异常导致，或许只是一个无关紧要的接口挂掉了。那么一个接口挂掉了为什么会导致整个页面无数据呢？promise.all告诉我们，如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），就不再执行then方法回调，以上用例 正好可以解决此种问题
应用场景3：验证多个请求结果是否都是满足条件
描述：在一个微信小程序项目中，做一个表单的输入内容安全验证，调用的是云函数写的方法，表单有多7个字段需要验证，都是调用的一个 内容安全校验接口，全部验证通过则 可以 进行正常的提交
function verify1(content){ return new promise((resolve,reject)=>{ settimeout(function(){ resolve(true) },200) })}function verify2(content){ return new promise((resolve,reject)=>{ settimeout(function(){ resolve(true) },700) })}function verify3(content){ return new promise((resolve,reject)=>{ settimeout(function(){ resolve(true) },300) })}promise.all([verify1('校验字段1的内容'),verify2('校验字段2的内容'),verify3('校验字段3的内容')]).then(result=>{ console.log(result)//[true, true, true] let verifyresult = result.every(item=>item) //验证结果 console.log(verifyresult?'通过验证':'未通过验证')// 通过验证}).catch(err=>{ console.log(err)})
promise.race
语法：promise.race（iterable）
参数: iterable 可迭代的对象，例如array。可迭代的。
返回值：promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝
描述 race 函数返回一个 promise，它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失败（rejects），这要取决于第一个完成的方式是两个中的哪个。
如果传的迭代是空的，则返回的 promise 将永远等待。
如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺，则 promise.race 将解析为迭代中找到的第一个值。
应用场景1：图片请求超时
//请求某个图片资源function requestimg(){ var p = new promise(function(resolve, reject){ var img = new image(); img.onload = function(){ resolve(img); } //img.src = "https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg"; 正确的 img.src = "https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg1"; }); return p;}//延时函数，用于给请求计时function timeout(){ var p = new promise(function(resolve, reject){ settimeout(function(){ reject('图片请求超时'); }, 5000); }); return p;}promise.race([requestimg(), timeout()]).then(function(results){ console.log(results);}).catch(function(reason){ console.log(reason);});
应用场景2：请求超时提示
描述：有些时候，我们前一秒刷着新闻，下一秒进入电梯后，手机页面上就会提示你 “网络不佳”
//请求function request(){ return new promise(function(resolve, reject){ settimeout(()=>{ resolve('请求成功') },4000) })}//请求超时提醒function timeout(){ var p = new promise(function(resolve, reject){ settimeout(function(){ reject('网络不佳'); }, 3000); }); return p;}promise.race([ request(), timeout()]).then(res=>{ console.log(res)}).catch(err=>{ console.log(err)//网络不佳})
promise.prototype.then
应用场景1：下个请求依赖上个请求的结果
描述：类似微信小程序的登录，首先需要 执行微信小程序的 登录 wx.login 返回了code，然后调用后端写的登录接口，传入 code ，然后返回 token ，然后每次的请求都必须携带 token，即下一次的请求依赖上一次请求返回的数据
function a(){ return new promise((resolve,reject)=>{ settimeout(()=>{ resolve('b依赖的数据') },300) })}function b(prams){ return new promise((resolve,reject)=>{ settimeout(()=>{ resolve(prams + 'c依赖的数据') },500) })}function c(prams){ return new promise((resolve,reject)=>{ settimeout(()=>{ resolve(prams) },1000) })}//我们期望的是走 try ，由于a b c模拟的请求中都是没有reject，用 try catch 捕获错误try{ a().then( res=>b(res) ).then( res=>c(res) ).then( res=>{ console.log(res)//b依赖的数据c依赖的数据 }) } catch(e){ }
应用场景2：中间件功能使用
描述：接口返回的数据量比较大，在一个then 里面处理 显得臃肿，多个渲染数据分别给个then，让其各司其职
//模拟后端返回的数据let result = { bannerlist:[ {img:'轮播图地址'} //... ], storelist:[ {name:'店铺列表'} //... ], categorylist:[ {name:'分类列表'} //... ], //...}function getinfo(){ return new promise((resolve,reject)=>{ settimeout(()=>{ resolve(result) },500) })}getinfo().then(res=>{ let { bannerlist } = res //渲染轮播图 console.log(bannerlist) return res}).then(res=>{ let { storelist } = res //渲染店铺列表 console.log(storelist) return res}).then(res=>{ let { categorylist } = res console.log(categorylist) //渲染分类列表 return res})
推荐教程：《js教程》
以上就是前端 promise 常见的一些应用场景的详细内容。