如何获取PromiseResult中的值？React新手的异步函数问题

问题描述 #

你编写了如下函数尝试获取统计值：

get_total_by_status(status: string){
  const total = imports.index(status).then((d) => {
    return d.total 
})
  return total
}

调用方式：

var status_published = this.get_total_by_status("pending payment")

但无法拿到实际值，打印total得到的是一个处于fulfilled状态但包含结果202的Promise对象：

Promise {<pending>}
  [[Prototype]]:Promise
  [[PromiseState]]: "fulfilled"
  [[PromiseResult]]: 202

你尝试过给函数加async、调用时用await，以及回调方式，都没成功拿到值。回调写法如下：

get_total_by_status(status: string, onSuccess) {
  imports.index(status).then(
    (d) => {
      onSuccess(d.total);
    }
  );
}

// 调用部分
const status_published = this.get_total_by_status("published", 
(response) => {
      return response  // 也试过 status_published = response
    })

回调内打印response能得到202，但外部的status_published始终为undefined。

错误原因 #

JavaScript的异步操作（比如这里的imports.index(status)）不会阻塞代码执行，get_total_by_status返回的是一个Promise对象，而非直接的结果值。你之前的async/await没生效，大概率是调用await的地方不在async函数里；回调写法里，外部变量status_published会在回调执行前就被赋值（因为回调是异步触发的），所以拿不到值。

正确解决方案 #

方案1：使用async/await（推荐） #

把get_total_by_status改成async函数，内部用await等待异步操作完成，直接返回结果值：

async get_total_by_status(status: string) {
  const d = await imports.index(status);
  return d.total;
}

调用时，必须在async函数内使用await：

// 比如在类的async方法里调用
async someFunction() {
  const status_published = await this.get_total_by_status("pending payment");
  console.log(status_published); // 这里就能拿到202
}

注意：await只能在async标记的函数中使用，不能在普通函数或全局作用域直接用（除非是支持顶层await的环境）。

方案2：正确使用回调 #

回调的核心是在回调函数内部处理结果，而非试图把结果赋值给外部变量（因为外部代码会比回调先执行）：

get_total_by_status(status: string, onSuccess) {
  imports.index(status).then((d) => {
    onSuccess(d.total);
  });
}

// 调用时，在回调里处理拿到的202
this.get_total_by_status("published", (response) => {
  console.log(response); // 这里能拿到202
  // 在这里做你需要的操作，比如更新组件状态：
  // this.setState({ publishedTotal: response });
});

这种写法里，外部的status_published不需要定义，因为结果只能在异步回调触发后才能访问，直接在回调里处理业务逻辑即可。

总结 #

JavaScript的异步逻辑和Python有差异：Python的await会直接阻塞至任务完成，但JavaScript的async/await是Promise的语法糖，本质还是异步非阻塞。你需要遵循异步代码的执行规则，要么用async/await在异步上下文里获取结果，要么在回调内部处理结果。

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