尝试使用 fetch 和 promise 获取数据，不起作用（反应）

Question

我正在尝试使用 fetch 从 API 中获取数据，我可以 console.log 将结果记录在 fetch 中，但在 fetch 之外我无法访问数据。

所以我得到了这个包含函数的 fetchData.js 文件：

export const fetchData = (url) => {
    
    return fetch(url)
        .then(response => response.json())
        .then(result => console.log(result))
        .catch(error => console.log('error', error))
}

然后在 app.jsx 文件中我这样调用函数：

import { fetchData } from "./fetchData";

const URL = "https://pokeapi.co/api/v2/pokemon"

function App() {
  let data = fetchData(URL);
  console.log(data);

//return etc

但是 console.log(data) 一直说“未定义”

有人可以帮帮我吗？

Answer 1

您必须等待异步操作完成才能记录它。

let data = fetchData(URL).then(() => {console.log(data);});

（也可以删除then(result => console.log(result)) 或从中返回结果）

Answer 2

fetchData 是一个async 函数，这就是为什么在解析fetchData 之前执行console.log：

export const fetchData = async (url) => {  
    return fetch(url)
        .then(response => response.json())
        .then(result => (result)) //--> data
        .catch(error => console.log('error', error))
}

然后在组件里面，在useEffect里面：

function App() {
  const [data, setData] = useState([]) //--> keep data in component state
  
  useEffect(()=> {
     fetchData(URL) //--> fetch data when component is mounted
      .then(response => setData(response))
  }, []);
  //...
}