Svelte中async/await执行顺序不符合预期，求助排查问题

错误原因 #

你的代码执行顺序不符合预期，核心问题出在computePV函数和pv函数的执行逻辑上：

• async函数本身会返回Promise，但如果内部的pv(data)是同步的耗时计算，await pv(data)并不会让它变成异步执行——因为await只对Promise生效。当pv是同步函数时，computePV(data)调用会先同步完成整个pv计算，才会返回resolved的Promise，这就导致compute函数里的console.log("promise created")要等计算完成后才会执行，完全阻塞了后续代码。

解决方案 #

要让耗时计算不阻塞主线程，需要把同步的计算逻辑包装成异步操作，让Promise立即返回，计算在异步队列中执行。

修改后的代码示例

如果可以修改pv函数，直接把它改成返回Promise：

// 将同步计算包装为Promise
function pv(data) {
  return Promise.resolve().then(() => {
    // 这里放置原有的耗时计算逻辑
    let result = 0;
    for (let i = 0; i < 1e8; i++) result += i;
    return result;
  });
}

async function computePV(data) {
  return await pv(data);
}

function compute(e) {
  console.log("button clicked");
  pcvpromise = computePV(data);
  console.log("promise created");
}

$: console.log(pcvpromise);

如果无法修改pv函数，也可以在computePV内部包装：

async function computePV(data) {
  // 把同步的pv调用放入异步队列
  return await Promise.resolve().then(() => pv(data));
}

验证执行顺序 #

修改后执行流程会完全符合你的预期：

1. 点击按钮后立即打印button clicked
2. 立即创建Promise并打印promise created
3. Svelte响应式语句$: console.log(pcvpromise)打印出Pending状态的Promise
4. 后台计算完成后，Promise变为Resolved状态，Svelte会再次触发响应式日志，打印Resolved的Promise

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