Promise对象的使用方法 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Document</title>
  8 </head>
  9 <body>
 10     
 11 </body>
 12 </html>
 13 <script>
 14     //异步执行的代码
 15     setTimeout(function(){
 16         console.log(1);
 17     },1000);
 18     setTimeout(function(){
 19         console.log(2);
 20     },1000);
 21     setTimeout(function(){
 22         console.log(3);
 23     },1000);                //经过一秒1,2,3,同时打印出来了
 24 //以下方法可以实现异步代码的同步执行:
 25 /*
 26     1、promise有1个参数，是一个回调函数fn
 27     2、回调函数有2个参数：resolve,reject;
 28     4: new Promise 的返回值是一个promise
 29     5: promise 有  then  catch  all  race   方法{链式方法：promise.then().catch()};
 30 */
 31 //生成一个Promise对象，将俩个异步代码同步执行(主要使用then方法)
 32     new Promise(function(resolve,reject){  
 33         setTimeout(function(){
 34             console.log(1);
 35             resolve();    //执行resolve方法，配合then执行
 36         },1000);
 37     }).then(function(){
 38         setTimeout(function(){
 39             console.log(2);   
 40         },1000);
 41     })                    //至此 ， 1和2 是每过一秒分别打印出来的;
 42 //生成一个Promise对象，将多个异步代码同步执行
 43     new Promise(function(resolve,reject){  
 44             setTimeout(function(){
 45                 console.log(1);
 46                 resolve();    //执行resolve方法，配合then执行
 47             },1000);
 48         }).then(function(){
 49             return new Promise(function(resolve,reject){
 50                 setTimeout(function(){
 51                     console.log(2);  
 52                     resolve();
 53                 },1000);
 54             }) 
 55         }).then(function(){
 56                 setTimeout(function(){
 57                     console.log(3);   
 58                 },1000);
 59         })            //如此多次使用Promise方法,即可实现多个异步代码同步执行
 60 // 注:resolve方法是可以传参的     then内的回调函数可以接收resolve传来的参数 
 61     new Promise(function(resolve,reject){  
 62             setTimeout(function(){
 63                 var a = 1;
 64                 resolve(a);    
 65             },1000);
 66         }).then(function(b){
 67             setTimeout(function(){
 68                 console.log(b);             //2秒后打印出来 1;
 69             },1000);
 70         });
 71 catch方法的使用方法
 72     new Promise(function(resolve,reject){  
 73                 setTimeout(function(){
 74                     reject();    
 75                 },1000);
 76             }).catch(function(){
 77                 setTimeout(function(){
 78                     console.log(1);          //2秒后打印出来 1;
 79                 },1000);
 80             });    
 81     //说明：若resolve()执行，则执行then();若reject()执行，则执行catch();     
 82 //all方法的使用：所有的方法都进行完毕才执行；
 83     var p1 = new Promise(function(resolve,reject){
 84         setTimeout(function(){
 85             resolve(1);
 86         },1000)
 87     });  
 88     var p2 = new Promise(function(resolve,reject){
 89         setTimeout(function(){  
 90             resolve(2);
 91         },2000)
 92     });  
 93     Promise.all([p1,p2]).then(function(data){
 94         console.log(data);               //2 秒过后才打印出所有的数据:[1,2];
 95     })      
 96     //注：all方法接收的参数必须是数组，结合then和catch使用； 
 97 //race方法的使用，返回最先执行完毕的方法的返回值；
 98     var p1 = new Promise(function(resolve,reject){
 99             setTimeout(function(){
100                 resolve(1);
101             },1000)
102         });  
103         var p2 = new Promise(function(resolve,reject){
104             setTimeout(function(){  
105                 resolve(2);
106             },2000)
107         });  
108         Promise.race([p1,p2]).then(function(data){
109             console.log(data);               //1秒过后才打印出先执行完毕的数据:1;
110         })  
111 </script>
注：JavaScript异步执行的有计时器（setInterval,setTimeout）,各种事件，ajax；可以使用Promise使异步代码同步执行；

 

posted @ 2019-05-11 21:00  谢勇飞~  阅读(787)  评论(0)  编辑  收藏  举报