async await 返回一个 Promise 而不是一个值

Question

在全栈应用程序上工作我正在调用从数据库中检索信息并将其返回的后端。事情是，当我期望获得价值时，我只得到一个Promise {<pending>}。我已经在后端代码上验证了我实际上得到了来自数据库的响应并将其发送回前端，所以我不确定为什么没有解决承诺。对此有何想法/建议？

这是我试图调用后端并显示信息的组件。 console.log 是显示 Promise {<pending>}

getTheAsset = async id => {
    try {
        const response = await this.props.getAsset(id)
            .then(result => {
                console.log("[DisplayAsset] Promise result: ", result);
            });

    } catch(error) {
        console.log("[DisplayAsset] error: ", error);
    }
}

render() {
    const asset = this.getTheAsset(this.props.match.params.id);
    console.log("[DisplayAsset] asset - ", asset);
    return (
        <div className="container">

        </div>
    );
}

以下是进行 API 调用的 redux 操作。

export const getAsset = (id) => async dispatch => {
  const response = await axios.get(`http://localhost:8181/api/asset/${id}`);
  dispatch({
    type: GET_ASSET,
    payload: response.data
  });
}

我已经包含了后端的快照，表明我实际上从数据库中获取了一个值。

我也发现了这个很棒的 answer，但仍然没有太多运气将它应用到我的情况。

Answer 1

异步函数总是返回承诺；这就是他们所做的。 Async/await 的存在是为了简化与 Promise 相关的语法，但它不会改变涉及 Promise 的事实。

对于 React 组件，您需要有一个状态值，该值一开始表明它尚未加载，然后您开始异步工作，并在完成时更新状态。如有必要，您可以在加载时渲染占位符。

state = {
  asset: null,
}

componentDidMount() {
  this.getTheAsset(this.props.match.params.id)
    .then(result => this.setState({ asset: result });
}

render() {
  if (this.state.asset === null) {
    return null; // or some other placeholder.
  } else {
    return (
      <div className="container">

      </div>
    );
  }
}