異步等待解決 graphql 查詢 promise 未解決

Question

大家好我正在嘗試使用 graphql api 獲取一些國家。 我正在使用這個 API https://studio.apollographql.com/public/countries/home?variant=current這是游樂場https://countries.trevorblades.com/

我面臨的問題是我無法解析 Promise。我正在使用 React 和fetch方法。

我的 fetchCountries.js 文件：

import { API_URL } from "./constants";

const COUNTRIES_QUERY = `{
  country(code: "BR") {
    name
    native
    emoji
    currency
    languages {
      code
      name
    }
  }
}`;

const fetchCountries = async () => {
  await fetch(API_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      query: COUNTRIES_QUERY,
    }),
  })
    .then((response) => {
      if (response.status >= 400) {
        throw new Error("Error fetching data");
      } else {
        return response.json();
      }
    })
    .then((data) => data.data);
};

export default fetchCountries;

我正在使用異步，在 function 中等待，以便在我調用它時得到解決。 現在在我的 App.js 中，當我在 console.log 中調用 fetchCountries function 時，我得到：

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

應用程序.js：

import "./App.css";
import fetchCountries from "./api/fetchCountries";

const App = () => {
  console.log("CONSOLE LOG API", fetchCountries());

  return <div>App</div>;
};

export default App;

我也嘗試過使用 useEffect 鈎子但得到了相同的結果：

import "./App.css";
import fetchCountries from "./api/fetchCountries";
import React, { useEffect, useState } from "react";

const App = () => {
  const [test, setTest] = useState();

  console.log("CONSOLE LOG API", fetchCountries());

  useEffect(() => {
    const getCountries = async () => {
      await fetchCountries();
    };
    setTest(getCountries());
  }, []);
  console.log("USE EFFECT API", test);

  return <div>App</div>;
};

export default App;

Answer 1

你應該這樣做如下

const fetchCountries = async () => {
  const response = await fetch(API_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      query: COUNTRIES_QUERY,
    }),
  })
    
      if (response.status >= 400) {
        throw new Error("Error fetching data");
      } else {
        return await response.json();
      }
    
};

export default fetchCountries;

或者將整個fetch.then...鏈包含在括號內。