异步

骑猪看日落 2023-07-10 14:04 28阅读 0赞

## 宏任务队列与微任务队列执行顺序例子 ##

例如：定时器属于宏任务，Promise中then将任务加入微任务队列。  
执行顺序：微任务优先级>宏任务

> 下面代码：

new Promise((resolve,reject)=>{ 
            resolve(555);
            console.log('Promise');
       }).then(value=>console.log(result);
       );
        console.log(22);
        由于Promise构造函数中的代码与主线程优先级相同，
        先执行resolve()发送成功通知，
        将then中的任务加入微任务队列，
        继续执行Promise构造函数中的内容，
        1.打印'Promise'，然后执行下面的主线程：
     	2.打印 22 ，
     	主线程执行完毕之后，执行微任务队列中的任务：
     	3.打印555.

setTimeout(()=>{ 
           console.log('setTimeout');
           
       },0)
       new Promise((resolve,reject)=>{ 
            resolve(555);
       }).then(value=>console.log(result);
       );
        console.log(22);
    执行顺序为： 22 555 setTimeout
    resolve()执行时会发送成功通知将then中的任务加入到微任务队列。

下面的执行顺序如何：
        new Promise((resolve, reject) => { 
            setTimeout(() => { 
                console.log('setTimeout');//3
                resolve();
            }, 0);
            console.log('promise');//1
    
        }).then(function () { 
            console.log('成功');//4
        });
        console.log(22);//2
    因为Promise构造函数中的执行顺序与主线程相同，
    把setTimeout放入宏队列，打印promise第一个，去执行主线程，
    打印22，此时resolve还在宏队列，
    从宏队列中先执行setTimeOut，
    然后执行resolve()执行完后发送成功通知给then,
    将then中的任务加入微任务队列，最后打印  成功。

—待更新  
\---- **Promise.all**(参数为数组或具有Iterator接口)  
Promise.all()用于将多个Promise实例包装成一个新的Promise实例，var p = Promise.all(\[p1,p2,p3\]);  
p的状态：  
1.p1,p2,p3的状态都为Fulfilled，p的状态才会变成Fulfilled，此时p1,p2,p3的返回值组成一个数组传递给p的回调函数；  
2.p1,p2,p3有一个被rejected，p就会变成rejected，此时第一个被rejected的实例的返回值会传递给p的回调函数；

\---- Promise.allSettled(\[p1,p2,p3\])与Promise.all的不同之处在于：Promise.allSettled()有出错的也会全部打印

打印结果：  
0: \{status: “fulfilled”, value: “年龄26”\}  
1: \{status: “rejected”, reason: “出错了”\}  
2: \{status: “fulfilled”, value: “年龄27”\}  
length: 3  
**proto**: Array(0)  
此时的数据失败也返回了  
可以通过数据过滤，去掉错误的数据

Promise.allSettled(p).then(values=>{ 
          let users = values.filter(user=>{ 
    		return user.status == 'fulfilled';
    	  })
    	console.log(users);
     })

Promise.race()  
–Promise.race(\[p1,p2,p3\])(请求超时处理例子)  
p数组中谁的状态率先改变，谁的Promise实例返回值就传递给p的回调函数。

–Promise队列的例子：

--使用Map实现Promise队列：
    function queue(num) { 
        let promise = Promise.resolve();
        num.map(v => { 
            promise = promise.then(() => { //上一个Promise.then的结果作为下一个promise
                return new Promise(resolve => { 
                    setTimeout(() => { 
                        console.log(v);
                        resolve();
                    }, 1000);
                })
            })
        })
    }
    queue([1, 2, 3, 4, 5]);
    
    --Reduce封装Promise队列
        function queue(num) { 
            num.reduce((promise, n) => { 
                return promise.then(() => { 
                    return new Promise(resolve => { 
                        setTimeout(() => { 
                            console.log(n);
                            resolve();
                        }, 1000)
                    })
                })
            }, Promise.resolve());
        }
        queue([1,2,3,4,5]);

*  async：相当于Promise语法糖

例一：  
async function ys()\{\}  
console.log(ys());//打印Promise状态为Resolved

例二：  
async function ys()\{  
return ‘测试async’;  
\}  
ys().then(v=>\{  
console.log(v);//打印’测试async’  
\})

async函数返回promise对象，await类似于then；

–下面是一个进度条加载的例子（学习视频参考）：  
–进度条加载：  
因为没有ajax 所以直接用Promise代替。

//进度条样式
            div { 
                width: 0px;
                height: 50px;
                background: green;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;//字体垂直居中
                font-size: 30px;
                color: #fff;
            }
     <div id = "loading"></div>
        function query(name) { 
            // return ajax(`http://localhost:8080...?name=${name}`);//返回promise对象
            return new Promise(resolve => { 
                setTimeout(() => { 
                    resolve('qqq');
                }, 1000)
            })
        }
        async function loadUserProgress(users) { 
            for (let i = 0; i < users.length; i++) { 
                let user = await query(users[i]);
                let progress = (i+1)/users.length*100;
                loading.style.width = progress + '%';
                loading.innerHTML = Math.round(progress) + '%';
                console.log(i);
            }
        }
    
        loadUserProgress(['yy', 'ys', 'xyf']);