javascript - 异步函数会阻塞执行

Question

据我了解，异步函数允许异步执行代码，但它似乎在我的代码中不起作用:

async function longAsyncWork() {
    await foo(); // takes about 10 seconds to complete
}

console.log('start');
longAsyncWork();
console.log('end');

“结束”是在 longAsyncWork 完成之后写在控制台中的，但我认为异步函数的目标是允许执行代码而不阻塞主执行。

也许是 console.log 调用的特殊性阻止了我看到真相？我可以假设 longAsyncWork 调用之后的代码将在 longAsyncWork 函数完成之前执行吗？

Answer 1

Asnyc 函数异步工作，但 javascript 是单线程的，这意味着浏览器一次只能执行一项任务。您在函数内部所做的操作本质上必须是异步的才能真正使其工作，但是您可能在那里做了一些本质上同步的阻塞操作。让我通过举例来更详细地解释:

async function fooThatCanBeAsync(){
    var result = await fetch("https://stackoverflow.com");
      console.log("after async task 1");
      return result;
    }
    async function fooThatCannotBeAsync(){
        var x = 0;
        for(i=0; i<10000000; i++){
            x += i;
        }
      console.log("after async task 2");
   }
   fooThatCanBeAsync();
   fooThatCannotBeAsync();
   console.log("end...");

上面的愚蠢示例有两个异步函数。然而，其中只有一个可以异步运行!第一个函数尝试通过发送 http 请求来获取某些内容，这将需要一些时间。这意味着，CPU 现在是空闲的，直到它开始接收结果。通过将此函数设为异步，您现在可以利用这段时间来执行其他任务。这就是 javascript 中并发的工作原理。

第二个函数执行 for 循环，进行一些计算。这些计算不能是异步的，因为无法中断它，没有时间等待，也没有 i/o 操作。仅仅因为您添加了 async 关键字，您就无法改变只有一个 cpu 线程正在执行该代码的事实。