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使异步代码同步执行;
知识在于点滴积累