es6 promise.all（ES6 – Promise详解及用法）

一    
    
    
、什么是Promise

Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8）    
    
    
，但是它们是基于promise的) 


     


     


 ，从语法上讲

 




 




 ，Promise是一个对象或者说是构造函数   

   

   

，用来封装异步操作并可以获取其成功或失败的结果
    
    
 。

二 


     


     


 、为什么要使用promise

最重要也是最主要的一个场景就是ajax和axios请求     


     


     。通俗来说  

     

     

，由于网速的不同


  




  




  ，可能你得到返回值的时间也是不同的  


  


  

，但是我们下一步要执行的代码依赖于上一次请求返回值   
     
     
，这个时候我们就需要等待



   




   




  ，结果出来了之后才知道怎么样继续下去 




 




 




。 

三

 




 




 、promise的好处

防止出现回调地狱；

提高代码的可读性；

像同步操作那样去执行异步操作

 四   

   

   

、promise的三种状态

1.pending: 等待中 



 



 

，或者进行中              ，表示还没有得到结果

2.resolved(Fulfilled): 已经完成




    




    




  ，表示得到了我们想要的结果











，可以继续往下执行

3.rejected: 也表示得到结果               ，但是由于结果并非我们所愿



     



     



  ，因此拒绝执行  <script> function fn(flag) { //构造函数 return new Promise(function(resolve, reject) { if (flag === true) { resolve(promise状态为成功！) }; if (flag === false) { reject(promise状态失败！) }; }) } console.log(fn(true)); </script>

五  

     

     

、promise的用法 

1.promise的实例方法

①then()      得到异步任务的正确结果

②catch()    获取异常信息

③finally()   成功与否都会执行(尚且不是正式标准)

 注意：then方法可以接受两个函数











，第一个函数为promise状态为成功的回调函数    
    
    
，第二个函数为promise状态为失败的回调函数（可以不写 


     


     


 ，一般用catch方法捕获promise状态为失败的异常信息） <script> let pro = new Promise((resolve, reject) => { if (Math.random() > 0.5) { resolve("im resolve"); } else { reject("im reject"); } }) pro.then((res) => { console.log(res); }).catch((err) => { console.log(err); }) </script>

案例

    目标：拿到关于 狙击手 电影的描述

    过程：

    1.先登录

    2.请求 导演信息 找到张导的id

    3.请求 电影信息 找到描述 

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> // 1.登录 // let myLogin = () => new Promise() function myLogin() { return new Promise((resolve, reject) => { $.ajax({ type: get, url: ../json/login.json, success(res) { resolve(res); }, error(err) { reject(err); } }) }) } // 2.导演列表 function myDirector() { return new Promise((resolve, reject) => { $.ajax({ type: get, url: ../json/director.json, success(res) { resolve(res); }, error(err) { reject(err); } }) }) } // 3.电影信息 function myFilm(id) { return new Promise((resolve, reject) => { $.ajax({ type: get, url: ../json/ + id + .json, success(res) { resolve(res); }, error(err) { reject(err); } }) }) } myLogin().then(res => { return myDirector(); }).then(res => { return myFilm(3); }).then(res => { console.log(res); }).catch(err => { console.log(err); }) </script>

 2.promise的对象方法(p1,p2,p3为promise的实例对象)

①Promise.all()  并发处理多个异步任务

 




 




 ，所有任务都执行完成才能得到结果

Promise.all( [p1,p2,p3] ) .then ( (result) => { consoleog (result) })

②Promise.race()  并发处理多个异步任务   

   

   

，只要有一个任务完成就能得到结果

Promise.race ( [p1,p2,p3] ).then ( (result)=>{ console. log (result) })

六


  




  




  、总结

1.promise其实就是一个对象或者说是构造函数

2.promise的出现（es6） 就是解决异步编程和回调地狱等问题  

     

     

，async和await的出现（ES8）就是基于promise的一种解决异步编程的终极解决方案（简化代码等等）

3.在前端中


  




  




  ，ajax和axios都会用到异步编程  


  


  

，axios更是基于promise的   
     
     
，所以一定要掌握        promise以及用async和await搭配promise的使用