在異步/等待中等待 promise

Question

我試圖在 componentDidMount 中獲取一些數據，然后將其設置為 state，為此寫了一個異步等待 function。 但是，如果我試圖在等待之后立即使用值設置 state，則該值將設置為待處理的 promise，但控制台日志記錄會給出正確的 output。 出於這個原因，我調用 getData().then() 來設置數據，為什么它給出未決的 promise 有人可以在這里清除這個概念嗎？

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 });
    });
   
}

Answer 1

你可以簡單地這樣做：

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

Answer 2

getData是一個異步 function ，您可以在其中同步您的 fetch 調用。 所以它返回一個 promise。 獲取響應后，您正在控制台登錄該 function 。 所以它記錄數據。

您可以將其視為您使用的Fetch function，您正在等待它，因為它是異步的 function，您應該等待響應。 getData也一樣。 無論您如何等待，使用then或await 。