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使异步代码同步执行；