async/await 中的未决承诺答案

【问题标题】：pending promise inside async/awaitasync/await 中的未决承诺
【发布时间】：2022-01-12 15:18:00
【问题描述】：

我试图在 componentDidMount 中获取一些数据，然后将其设置为状态，为此编写了一个异步等待函数。但是，如果我试图在等待之后立即使用值设置状态，则该值被设置为待处理的承诺，但控制台日志记录会给出正确的输出。出于这个原因，我调用了 getData().then() 来设置数据，为什么它给出了未决的承诺，有人可以在这里澄清这个概念吗？

componentDidMount() {

    async function getData() {
      const baseUrl = `https://........`;
      const response = await fetch(baseUrl);

      if (response.status === 200) {
        const json = await response.json();
        const { data } = json;
        //console.log(data) =>correct output
        return data;
      }

      return null;
    }

    getData().then(data => {
      this.setState({ names: data });
    });
   
}

【问题讨论】：

在它解析之前，任何asyncexpression，包括promise，如果读取/记录，将输出：promise with in a pending state。在它被解决/拒绝后，任何读取/记录它都会返回该结果。您能否更详细地说明不清楚的部分？阅读this 可能会有所帮助。

标签： javascript reactjs asynchronous async-await react-lifecycle

【解决方案1】：

你可以这样做：

    componentDidMount() {
        const baseUrl = `https://........`;
        fetch(baseUrl)
        .then((response) => response.json())
        .then(result => {
            this.setState({ names: result.data});
        });
    }

【讨论】：

【解决方案2】：

getData 是一个异步函数，您可以在其中同步您的 fetch 调用。所以它返回一个承诺。获取响应后，您将在该函数内进行控制台登录。所以它会记录数据。

您可以将其视为您使用的Fetch 函数，您正在等待它，因为它是一个异步函数，您应该等待响应。 getData 也一样。无论您如何等待，请使用then 或await。

【讨论】：