js面试题中的异步问题

Bertha 。 2022-12-08 05:15 125阅读 0赞

# 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函数的语法糖。