vue学习

2024-01-05 07:45| 来源: 网络整理| 查看: 265

Promise概念

Promise对象用于表示一个异步操作的最终完成（或失败），及其结果值。

是一个对象构造函数 new

//凡是异步代码和定时代码都会等待主程序执行完毕后再开始

//哪些事异步操作 1 定时器延时器2 ajax3 绑定的onclick事件函数，，，

//注意new promise会立刻执行 console.log(1) new Promise(function(resolve,reject){ console.log(2) }) console.log(3) =->>123 //而.then需要异步执行 console.log(1) let p1 = new Promise(function(resolve,reject){ console.log(2) }) p1.then(function(){ console.log(3) }) console.log(4) =->>1243

##js代码执行机制

*所有同步任务都在主线程上的栈中执行。

*主线程之外，还存在一个“任务队列”（task queue），只要异步任务有了运行结果，就在“任务队列”之中放置一个事件。

*一旦“栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，选择出需要首先执行的任务（由浏览器决定，并不按序）

##宏任务与微任务

1.MacroTask（宏观Task） setTimeout,setInterval,requestAnimatonFrame,I/O

2.MicroTask微任务 process nextTick Promise Object observe MutationObserver

3.先同步，再取出第一个宏任务执行所有的相关微任务总会再下一个宏任务之前全部执行完毕如果遇见就先微后宏

console.log(1) setTimeout(function(){ console.log(2) },0) new Promise(function (resolve){ console.log('3') resolve(); }).then(function(){ console.log('4') }) -->1342 console.log(1); setTimeout(function(){ console.log(2) new Promise(function( resolve){ console.log(3) resolve() }).then(function(){ console.log(4) }) },0) new Promise(function(resolve){ console.log(5) resolve() }).then(function(){ console.log(6) }) console.log(7) --> 1576234 console.log(1); //延时器放到事件队列里面 setTimeout(function(){ console.log(2) new Promise(function( resolve){ console.log(3) resolve() }).then(function(){ console.log(4) }) },0) //promise new 立即执行但是then会放到事件队列微任务 new Promise(function(resolve){ console.log(5) resolve() }).then(function(){ console.log(6) }) //延时器放到事件队列里面宏任务 setTimeout(function(){ console.log(7) new Promise(function(resolve){ console.log(8) }).then(function(){ console.log(9) }) console.log(10) }) console.log(11) ->1 5 11 //此时事件队列代码有一个then6 两个延时器setTimeout ->1 5 11 6 //此时事件队列代码有两个延时器setTimeout 两个0秒，先上再下虽然里面有then 4 但是一个红任务里面必须会执行完微任务 -> 1 5 11 6 2 3 4 7 8 10 9

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章