js异步问题的深入理解

<强>原因分析:

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

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

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

<强>何为宏任务,何为微任务,# 63;

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

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

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

再看异步和等待中的执行顺序

代码如下(示例):

异步函数async1 () {
　　console.log (1);
　　等待async2 ();
　　console.log (2);//这里要等等待执行成功才会执行,进入微任务,排序1
　　}
　　异步函数async2 () {
　　console.log (3);
　　}
　　console.log (4);//主程序代码
　　setTimeout(函数(){
　　console.log (5);
　　},0)//进入宏任务,最后执行
　　async1 ();
　　新的承诺(函数(解决){
　　console.log (6);//这句同步执行
　　解决();
　　})(函数(){
　　console.log (7);//进入微任务,排序2
　　});
　　console.log (8);//主程序代码//输出的是4、1、3、6、8、2、7、5 

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

关于js异步问题的深入理解就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

js异步问题的深入理解