小试牛刀,来几个简单的异步问题引出易错小知识点 输出什么(别说我没提醒,仔细看)? 再来两个 输出什么呢? 这个输出什么呢? 接下来我们看一下输出 其他Promise的知识点就不做赘述了,仅列出几个不容易注意的和我经常犯错的 再来看一个简单的小例子 这个很简单,输出为1,3,2,但是原理是什么呢,实际上他是这样执行的 结论:3.1 1 2 结论:3.2 2 1 上面的再稍稍修改下 区别在于第一个宏任务中又包含一个宏任务,那应该是怎么处理,执行所有的微任务,宏任务当然放到下一轮宏任务去处理啦 前面给像我一样基础不扎实的小伙伴做铺垫用,接下来进入正文,面试中经常考到的执行顺序不懂的时候令人头疼,仔细分析下来会爱上分析的过程 想弄明白执行顺序有几个不得不知的概念(都是重点) 常见的微任务: 常见的宏任务: 结束枯燥的概念时间(虽然枯燥但是一定要看,很有用处,下文会尽量减少文字),我们来小小的检验一下理论的知识带来的成果 思路:首先先分队列,分出同步队列任务和等待队列任务 3.接下来先清空主线程任务。输出start 4.等待队列中,按规则输出(先同步,后微任务,最后宏任务) 5.输出promise1 和 timer1 6.微任务优于宏任务 输出promise2 7.最后宏任务 输出timer2 最后结果:start promise1 timer1 promise2 timer2 是不是有点理解了?就是把任务一步一步分出去,最后按顺序按规则输出,其中的坑已经在前面都总结了一些,接下来自己试一试吧 这个问题眼熟么,就是第三部分中的原题啊!!看过透题的小伙伴应该可以答对了吧,答不对的抽自己两巴掌回去再看一下~ 看完前面如果如果我写的足够通俗并且您也仔细看过了,正确率应该能达到90%,剩下10%可能是有些马虎或者漏掉了需要注意的地方,也可能是我道行浅遇到的问题不够多 搜集了一些常见的题,大家试一下吧 5.1 =>2 3 1 5.2 => 1 4 6 7 9 2 8 3 5 5.3 => 1 9 5 0 6 2 7 4 8 3 本文用于总结从蒙顺序到自己开始分析的学习过程,用词也并不专业,如有错误及补充欢迎大家指出,共同进步,希望本篇文章能帮助到和我曾经一样有疑惑的同学一、Promise
// Question1 new Promise(resolve => { console.log('promise') }).then(function() { console.log('promise1') }).then(function() { console.log('promise2') }) //Question2 new Promise(resolve => { resolve(1) }).then(function(res) { console.log('promise1') }).then(function(res) { console.log(res) }) //Question3 new Promise(resolve => { resolve(1) }).then(function(res) { console.log('promise1') return res }).then(function(res) { console.log(res) }) //Question4 new Promise(resolve => { resolve(1) }).then(1).then(function(res) { console.log(res) })
这个有几个小小知识点,如果您已经知道可以略过
//Question1 new Promise(resolve => { console.log('promise') }).then(function() { console.log('promise1') }).then(function() { console.log('promise2') }) //promise //没有resolve,不执行后续操作 //Question2 new Promise(resolve => { resolve(1) }).then(function(res) { console.log(res)//接受resolve传过来的1 }).then(function(res) { console.log(res)//上一步没有返回值 }) //1 undefined //Question3 new Promise(resolve => { resolve(1) //状态成功,往下执行 }).then(function(res) { console.log('promise1') return res }).then(function(res) { console.log(res)//接受上一步的返回值 }) //promise1 1 //Question4 new Promise(resolve => { resolve(1)//成功,往下执行 }).then(1).then(function(res) { console.log(res)//.then(1)被略过,接收resolve(1)传过来的1 }) //1 二、async/await
async function async1() { console.log(1) await waitHandle() console.log(2) } async1() function waitHandle(){console.log(3)} function async1(){ console.log(1) return new Promise((res) => { console.log(3) }).then((res) => { //await执行完毕后才会执行后面的操作 console.log(2) }) } 三、setTimeout
//3.1 setTimeout(function () { console.log('1'); }, 0); setTimeout(function () { console.log('2'); }) //3.2 setTimeout(function () { console.log('1'); }, 10); setTimeout(function () { console.log('2'); }) 与时间有关,谁先执行完谁输出 setTimeout(function () { console.log('1'); new Promise(function (resolve) { console.log('2'); resolve(); }).then(function () { console.log('3') }) }, 0); setTimeout(function () { console.log('6'); new Promise(function (resolve) { console.log('7'); resolve(); }).then(function () { console.log('8'); }); })
输出 2 3setTimeout(function () { console.log('1'); new Promise(function (resolve) { console.log('2'); resolve(); }).then(function () { console.log('3') //新增一个setTimeout setTimeout(function () { console.log('9'); new Promise(function (resolve) { console.log('10'); resolve(); }).then(function () { console.log('11'); }); }) }) }, 0); setTimeout(function () { console.log('6'); new Promise(function (resolve) { console.log('7'); resolve(); }).then(function () { console.log('8'); }); })

所以相比上一个新增的宏任务要接着上一步的解析接着写
四、实战开始
//网络经典题1,先做题再对答案再看分析哦~ Promise.resolve().then(() => { console.log('promise1'); const timer2 = setTimeout(() => { console.log('timer2') }, 0) }); const timer1 = setTimeout(() => { console.log('timer1') Promise.resolve().then(() => { console.log('promise2') }) }, 0) console.log('start’);
主线程任务
等待队列
console.log(‘start’)
console.log(‘promise1’);
–
const timer2 = setTimeout(() => {console.log(‘timer2’)}, 0)
–
console.log(‘timer1’)
–
Promise.resolve().then(() => {console.log(‘promise2’)})
按照上面的顺序 我们再来试一个//网络经典题2,先做题再对答案再看分析哦~ async function async1() { console.log(1) await async2() console.log(2) } async function async2() { setTimeout(function () { console.log(3) },99.999) } console.log(4) setTimeout(function () { console.log(5) },100) async1() new Promise(function (resolve) { console.log(6) resolve() }).then(function () { console.log(7) }) console.log(8);
最后输出 4 1 6 8 2 7 3 5console.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'); }); setTimeout(function () { console.log('7'); new Promise(function (resolve) { console.log('8'); resolve(); }).then(function () { console.log('9'); }); })
最后结果:1 5 6 2 3 4 7 8 9五、自己试试吧
//5.1 async function asy2() { return new Promise(resolve => { setTimeout(function () { console.log(1) }); resolve(2) }).then(value => { console.log(value) }) } async function asy() { await asy2(); console.log(3) } asy() //5.2 async function async1() { console.log(1) await async2() console.log(2) return await 3 } async function async2() { console.log(4) } setTimeout(function() { console.log(5) }, 0) async1().then(v => console.log(v)) new Promise(function(resolve) { console.log(6) resolve(); console.log(7) }).then(function() { console.log(8) }) console.log(9) //5.3 (function() { setTimeout(() => { console.log(0); }); new Promise(resolve => { console.log(1); setTimeout(() => { resolve(); Promise.resolve().then(() => { console.log(2); setTimeout(() => console.log(3)); Promise.resolve().then(() => console.log(4)); }); }); Promise.resolve().then(() => console.log(5)); }).then(() => { console.log(6); Promise.resolve().then(() => console.log(7)); setTimeout(() => console.log(8)); }); console.log(9); })(); 六、结束
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)