雷盟-前端-20230109

1.promise

1. <script>
   
2.         // 实例化
   
3.         // Promise的状态改变了之后就结束了
   
4.         const p1 = new Promise((resolve, reject) => {
   
5.             if (true) {
   
6.                 resolve('成功');
   
7.             } else {
   
8.                 reject('失败')
   
9.             }
   
10.         });
    
11.         const p2 = new Promise(resolve => {
    
12.             setTimeout(() => {
    
13.                 resolve('aaa');
    
14.             }, 1000)
    
15.         });
    
16.         const p3 = new Promise(resolve => {
    
17.             setTimeout(() => {
    
18.                 resolve('bbb');
    
19.             }, 200)
    
20.         });
    
21.         const p4 = new Promise(resolve => {
    
22.             setTimeout(() => {
    
23.                 resolve('ccc');
    
24.             }, 3000)
    
25.         });
    
26.         // 静态方法--all,any,race
    
27.         //all()
    
28.         Promise.all([p2, p3, p4]).then(values => {
    
29.             console.log(values);
    
30.         });
    
31.         // any();
    
32.         Promise.any([p2, p3, p4]).then(values => {
    
33.             console.log(values);
    
34.         });
    
35.         // race()；
    
36.         Promise.race([p2, p3, p4]).then(values => {
    
37.             console.log(values);
    
38.         });
    
39.         // 所有的成功才可以，并发执行多个promise，必须多个（所有的）状态都变成成功才可以
    
40.         // console.log(Promise.all);
    
41.         // 任何一个成功就可以，只要并发中有一个成功，就返回那个成功的promise的值
    
42.         // console.log(Promise.any);
    
43.         // 谁跑的快就是谁--赛跑，并发执行多个promise，找出跑的最快的
    
44.         // console.log(Promise.race);
    
45.         // console.log(Promise.reject);
    
46.         // console.log(Promise.resolve);
    
47.     </script>

复制代码

2.async控制顺序

1. <script>
   
2.         // async和await是ES7提出来的关键字，主演用于补充Promise
   
3.         // Promise控制异步顺序，解决回调地狱
   
4.         // async：用在一个函数前面，声明函数中有异步的操作
   
5.         // await：只能用在async修饰的函数，必须配合async使用，用于等待一个Promise实例的状态变化
   
6.         async function fn(){
   
7.             let tet=await new Promise((resolve,reject)=>{
   
8.                 if(true){
   
9.                     setTimeout(()=>{
   
10.                         resolve('成功');
    
11.                     },5000);
    
12.                 }else{
    
13.                     reject('失败');
    
14.                 }
    
15.             });
    
16.             console.log(tet);
    
17.         };
    
18.         fn();
    
19.     </script>

复制代码

1. <script>
   
2.         async function getData(){
   
3.             let r1=await axios.get('http://162.14.107.109/list')
   
4.             console.log('接口1list',r1.data);
   
5. 
   
6.             let r2=await axios.get('http://162.14.107.109/show?id=1174')
   
7.             console.log('接口2show',r2.data);
   
8. 
   
9.             let r3=await axios.get('http://162.14.107.109/show?id=1185')
   
10.             console.log('接口3show',r3.data);
    
11.         }
    
12.         getData();
    
13.     </script>

复制代码