js面试题之异步问题的深入理解


Posted in Javascript onSeptember 20, 2020

js中的宏任务与微任务

在面试过程中,基本面试官都会问你一些promise的问题,promise是es6的新内容,主要是用来优化异步的问题。笔试中经常会让你写一些promise和setTimeout的执行结果,这你就必须知道宏任务和微任务的概念了!

为什么要使用promise

如果你经历过以前的jquery开发项目,你会遇到以下问题:回调地狱

$.ajax({
	...
	success: function() {
		...
		$.ajax({
			...
			success: function() {
				
			}
		})
		...
	}
})

原因分析:

ajax请求嵌套,原因是我第二个请求依赖的参数在第一个请求的结果中,所以就得这么一直嵌套下去,ajax是异步的,不能再外面拿到里面的结果。这种代码导致的问题就是调试困难,耦合性非常高,后期改动一个地方就头疼!维护非常困难,代码可读性差。

于是乎就引入了promise对ajax进行了优化,axios就是基于promise的一个请求封装库,他们底层都是基于js原生的XMLHTTPREQUEST.

promise().then().catch()链式调用,多个请求可以promise().then().then()。

何为宏任务,何为微任务?

思考这个问题时你必须知道javascript是一种单线程的脚本语言,也就是它的代码正常只能从上往下依次执行,一次只能做一件事,异步是通过回调函数来实现的。为何不把js设计成多线程的语言呢?语言的用途决定了它的特性,js最初是用来做表单验证以及正则判断的,和操作DOM元素的。如果js有多个线程,一个执行DOM元素修改,另一个执行删除,那浏览器直接懵逼了,我到底该干啥???所以语言的用途决定了他的特性,但是浏览器是多线程的,除了主线程还有其他线程。

当js主程序执行时,先运行主程序上的同步代码,遇到setTimeout或setInterval就把它放入宏队列中,遇到promise的回调就把它放到微队列中,程序执行先执行主程序代码,再执行nextTick代码,然后微任务,最后宏任务,任务队列中的依次排队执行,async和await是配套使用的,await后面接一个promise对象,来看看下面这段代码:

setTimeout(function(){console.log(1)},0); // 进入宏任务队列,最后执行宏任务
 new Promise(function(resolve,reject){
   console.log(2); //这句代码在promise构造器,同步执行
   resolve(); // 执行了resolve再把任务放入微队列
 }).then(function(){console.log(3)
 }).then(function(){console.log(4)});
 process.nextTick(function(){console.log(5)});
 console.log(6); // 主程序代码
 // 输出2,6,5,3,4,1
 
// 下面这个进阶代码
setTimeout(function(){console.log(1)},0); // 进入宏任务排序为1
new Promise(function(resolve,reject){
   console.log(2);
   // promise中执行完resolve()才会执行then(),而这里的resolve在宏任务里,执行完主程序代码后,还得先执行先进入宏队列中的程序
   setTimeout(function(){resolve()},0) // 进入宏任务排序为2
 }).then(function(){console.log(3)
 }).then(function(){console.log(4)});
 process.nextTick(function(){console.log(5)});
 console.log(6);
 // 输出的是 2 6 5 1 3 4

再看async and await中的执行顺序

代码如下(示例):

async function async1() {
  console.log(1); 
  await async2();
  console.log(2); //这里要等await执行成功才会执行,进入微任务,排序1
}
async function async2() {
  console.log(3);
}
console.log(4); //主程序代码
setTimeout(function() {
  console.log(5);
}, 0) //进入宏任务,最后执行
async1();
new Promise(function(resolve) {
  console.log(6); // 这句同步执行
  resolve(); 
}).then(function() {
  console.log(7); //进入微任务,排序2
});
console.log(8); // 主程序代码
// 输出的是 4,1,3,6,8,2,7,5

总结

js是单线程语言,它的用途决定了他的特性,异步操作通过事件循环机制,先执行同步代码,然后微任务,最后宏任务,两个任务队列里的任务排队依次执行。await后面的代码必须等待promise返回结果再执行下面代码,await和async是generator函数的语法糖。

到此这篇关于js面试题之异步问题的文章就介绍到这了,更多相关js面试题之异步内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
Three.js快速入门教程
Sep 09 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
js实现简单的点名器随机色实例代码
Sep 20 #Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 #Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 #Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 #Javascript
vue-cli3 热更新配置操作
Sep 18 #Javascript
vue-cli 关闭热更新操作
Sep 18 #Javascript
Node.JS如何实现JWT原理
Sep 18 #Javascript
You might like
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
loading动画特效小结
2017/01/22 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python numpy 点数组去重的实例
2018/04/18 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python 发送json数据操作实例分析
2019/10/15 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
演讲比赛获奖感言
2014/02/02 职场文书
财产公证书样本
2014/04/04 职场文书
作风建设演讲稿
2014/05/23 职场文书
投标承诺书怎么写
2014/05/24 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
高校教师个人总结
2015/02/10 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android