promise解释:
一种非阻塞异步执行的抽象概念.
如果我们想在promise之后执行某些操作,只能通过then回调(请求成功时)或者catch回调(请求失败时),整个函数又会返回一个promise,只会在then里执行下一步操作.
let success = Promise.resolve("success");
let failure = Promise.reject("failure");
let res_success = success.then(res=>{ console.log("成功了:"+res) }).catch(err=>{ console.log("失败了:"+err) });//then里执行
let res_failure = failure .then(res=>{ console.log("成功了:"+res) }).catch(err=>{ console.log("失败了:"+err) });//catch里执行
//同时 res_success和res_failure也是一个promise
//我们能在then回调里拿到success或failure的then或catch里返回的结果(如果没返回则是undefined)
几个应用场景:
- 有顺序的执行某些请求,我们把每个请求(promise形式)串起来搞成链式调用.
-
//验证 function getAuth(){ return new Promise((res,rej)=>{ //关键代码 }) } //用户信息 function getUsers(){ return new Promise((res,rej)=>{ //关键代码 }) } //页面信息 function getPageInfo(){ return new Promise((res,rej)=>{ //关键代码 }) } //请求顺序:先验证 => 再拿用户 => 再拿页面信息 getAuth().then(res => { if(res.success){ //验证通过,请求用户信息 return getUsers(); }else{ return Promise.reject(); } }).then(res => { if(res.success){ //成功获取用户信息,请求页面信息 return getPageInfo(); }else{ return Promise.reject(); } }).then(res => { if(res.success){ //成功获取页面信息,反射数据到视图上 //over request } })
- 同时发送多个关联请求,使用Promise.all([ promise1,promise2 ])(只要失败一个就算失败);
- 同时发送多个并行的请求,失败的记录,成功的执行相应的逻辑
-
function requestMain(urls,successfn,failurefn){ //图片url资源路径 let urls = [ 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2363246672,1942618513&fm=58', 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=4138785756047,2461366902&fm=58', 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=378711121878161,3674972757&fm=58', 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2412121295993728,2346220807&fm=58', ]; let errorArr = [];//记录错误的信息 //构建promise的函数 function generatePromise(url){ return new Promise((res,rej)=>{ // }) } // urls.reduce((promise,url,index)=>{ promise.then(res => { //请求成功执行的回调 successfn(res); }).catch(err=>{ //失败时,记录失败信息 errorArr.push(err); }).then(()=>{ if(index === urls.length-1 && errorArr.length > 1){ //全部请求完,并且错误数组不为空时执行回调 failurefn(errorArr); }else{ promise = generatePromise(url) } }) },Promise.reject(false)) }