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 相关文章推荐
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
vue实现折线图 可按时间查询
Aug 21 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
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
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
Vue 实现简易多行滚动"弹幕"效果
2020/01/02 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
Python基本数据类型详细介绍
2014/03/11 Python
Python用for循环实现九九乘法表
2018/05/31 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
心得体会范文
2014/01/04 职场文书
英语商务邀请函范文
2014/01/16 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
绿色学校实施方案
2014/03/31 职场文书
主题教育活动总结
2014/05/05 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
检讨书格式
2015/05/07 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle