控制台中的“Promise{<pending>}”而不是值

Question

我正在尝试将一个从文件 (.src/api/index.js) 中的 api 获取数据的函数导入我的 App.js (.src/App.js)。

.src/api/index.js

import axios from 'axios';

const url = 'https://covid19.mathdro.id/api';

export const fetchData = async () => {
    try {
        const res = await axios.get(url);
        return res;
    } catch (error) {}
};

.src/App.js

import React, { useEffect } from 'react';
import { fetchData } from './api';

const App = () => {
    useEffect(() => {
        const data = fetchData();
        console.log(data);
    }, []);

    return <div></div>;
};

export default App;
};

当我运行此程序时，我在控制台中收到Promise{<pending>}，但我正在尝试获取对象中的值。

Answer 1

fetchData()是一个异步函数，你需要像这样await它：

const data = await fetchData();

那么，useEffect 也必须是一个异步函数：

useEffect(async () => {
        const data = await fetchData();
        console.log(data);
    }, []);

Answer 2

你不是在等待承诺解决。使用 await 或 .then。如果你想使用await，请做useEffect异步函数的回调函数。

const App = () => {
    useEffect(async () => {
        const data = await fetchData();
        console.log(data);
    }, []);

    return <div></div>;
};

其他方法是使用.then。

const App = () => {
    useEffect(async () => {
        const data = fetchData().then((data) => console.log(data));
    }, []);

    return <div></div>;
};