js等待异步方法结束_大前端进击之路|JavaScript异步编程

经典面试题

我们先来看一道经典的面试题，让我们的小脑袋瓜子思考起来

//请写出输出内容
async function async1() {
    
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
    
console.log('async2');
}

console.log('script start');

setTimeout(function() {
    
console.log('setTimeout');
}, 0)

async1();

new Promise(function(resolve) {
    
console.log('promise1');
    resolve();
}).then(function() {
    
console.log('promise2');
});
console.log('script end');
复制代码

答案！你答对了吗？没对的不要跑，睁大你的小眼睛仔细看以下的内容

/*
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/
复制代码

JS采用单线程模式工作的原因

为了回答这个问题我们首先需要知道JS的执行环境是单线程的，是因为JS语言最早是运行在浏览器端的语言，目的是为了实现页面上的动态交互。实现动态交互的核心就是DOM操作，因此决定了JS必须是单线程模式工作。我们来假设一下如果JS是多线程一起工作的，其中一个线程修改了一个DOM元素，另外的一个线程同时又要删除这个DOM元素，那么此时浏览器就懵逼了，无法明确以哪个工作线程为准。所以为了避免线程同步的问题，JS就被设计成了单线程的工作模式。

注意，我们这里说的单线程是JS的执行环境是单线程，浏览