JavaScript await执行顺序与then回调放置：如何重构异步代码

将原.then回调内的全部处理逻辑，直接放在await获取结果的语句之后，作为顺序执行的代码即可，无需额外嵌套回调结构。

await的核心作用是暂停当前async函数的执行，等待Promise变为resolved状态后，将Promise返回值赋值给左侧变量，整个执行时序和原.then回调的触发逻辑完全等价。

调整说明 #

• 你已经编写的const attempt = await getAuthFailedAttempts();语句完全正确，原.then回调的入参attempt，就是该变量的值
• 原回调内的变量初始化、分支判断、状态更新逻辑，逐行平移到这行await语句后方即可，不需要套任何函数包裹

完整重构后代码 #

// 代码需放置在async函数内部
const attempt = await getAuthFailedAttempts();

let errorMessage = VALIDATION_ERROR;

if (!attempt.canRetry) {
  errorMessage = createFailedAttemptsError(attempt);
} else {
  setAuthFailedAttempt();
}

this.setState({
  loading: false,
  passcode: "",
  validationError: errorMessage,
});

执行逻辑等价性说明 #

• 执行顺序和原Promise写法完全一致：等待getAuthFailedAttempts的异步流程结束后，再执行后续的错误判断、组件状态更新逻辑
• 不存在逻辑提前执行的问题：await会阻塞当前async函数的后续代码，直到异步请求返回结果
• 原代码中混用await和.then的冗余嵌套可以完全移除，代码可读性会有明显提升

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