JavaScript中async/await执行行为疑问：输出顺序为何不符预期？

你忽略了async函数的异步本质：async函数调用后会立即返回一个Promise，主线程不会等待这个Promise完成，会直接继续执行后续代码。

你的代码执行流程是这样的：

• 先执行console.log('start')，输出"start"
• 调用githubRequest("eveporcello")，进入函数后遇到await fetch(...)：此时函数会暂停执行，把一个未完成的Promise抛回主线程，主线程不等请求完成，直接继续往下走
• 主线程执行console.log('end')，输出"end"
• 等GitHub的API请求完成后，githubRequest才会从暂停处继续执行：解析响应JSON、生成summary，最后输出"Eve Porcello, Moon Highway"

改成预期顺序的方法 #

要让主线程等待githubRequest完成后再输出"end"，需要在调用它时加上await。但await不能直接用在顶级作用域（除非代码在ES模块里），可以把外层代码包在一个async自执行函数里：

console.log('start');

const githubRequest = async(login) => {
  let response = await fetch(
    `https://api.github.com/users/${login}`
  );
  let json = await response.json();
  let summary = `${json.name}, ${json.company}`;
  console.log(summary);
};

// 用async函数包裹，等待请求完成后再输出end
(async () => {
  await githubRequest("eveporcello");
  console.log('end');
})();

这样执行顺序就会变成你预期的：
start
Eve Porcello, Moon Highway
end

内容的提问来源于stack exchange，提问作者Harshana