React异步等待axios调用返回承诺状态挂起,然后完成

l3zydbqr  于 2023-03-08  发布在  iOS
关注(0)|答案(3)|浏览(252)

我在useEffect钩子内调用函数,如下所示:

useEffect(() => {
        const getFirstLevelCategoryData = async (e) => {
            const config = {
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: `Bearer ${userInfo.token}`,
                },
            };
            const { data } = await axios.get('/api/category/firstlevel', config);
            return data;
        };
        console.log(getFirstLevelCategoryData());
            });

承诺{:“待定”} :“已履行” :阵列(29)[“音频”、“汽车”、“婴儿&儿童时尚”、...]
我在其他地方使用类似的代码也是工作正常,但这一个不断给挂起状态。调用的API从 Postman ,工作正常。任何想法?请帮助。
我期望JSON字符串,但它处于挂起状态。

nimxete2

nimxete21#

基本上你是从你的函数返回一个promise,所以要以你期望的方式得到值,你需要做如下的事情:
常量结果=等待获取第一级类别数据()
控制台.log(“结果”,结果)

xnifntxz

xnifntxz2#

REQUEST运行良好,问题在于此行:

console.log(getFirstLevelCategoryData());

在函数返回数据之前执行,请尝试:

const { data } = await axios.get('/api/category/firstlevel', config);
console.log(data)
);

您将看到dataconsole.log(getFirstLevelCategoryData());之后输出
因此,您需要做的是直接在函数内部使用data,而不需要返回它

ru9i0ody

ru9i0ody3#

这是因为你没有await(或.thengetFirstLevelCategoryData(),所以它实际上返回一个未解决的承诺。
您可以像这样使用它(.then):

const getFirstLevelCategoryData = async (e) => {
    const config = {
      headers: {
        "Content-Type": "application/json"
        // Authorization: `Bearer ${userInfo.token}`,
      }
    };

    const { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts/1",
      config
    );

      return data
  }

  useEffect(() => {
    getFirstLevelCategoryData()
      .then(data => {
        console.log(data);
       })
  }, []);

或者像这样(等待):

const getFirstLevelCategoryData = async (e) => {
    const config = {
      headers: {
        "Content-Type": "application/json"
        // Authorization: `Bearer ${userInfo.token}`,
      }
    };

    const { data } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts/1",
      config
    );

    // Log data here
    console.log(data)
  };

  useEffect(() => {
    getFirstLevelCategoryData();
  }, []);

这里还有一个codesandbox链接:https://codesandbox.io/s/quiet-river-11y75n

相关问题