从 axios 请求触发时，反应组件中的异步功能不起作用

Posted 2023-03-28

【中文标题】从 axios 请求触发时，反应组件中的异步功能不起作用

【英文标题】：async function in react component isn't working when triggered from the axios request

【发布时间】：2021-12-26 19:59:41

【问题描述】：

network.services.js

axiosCall = (axiosURL) => 
        // const axiosURL = "https://api.github.com/user"
        axios.get(axiosURL, 
            headers: 
              'Authorization': `qwdvryjutmnevw`,
            
        ).then((res) => 
            console.log(res.data);
            return res.data;
        ).catch((error) => 
            throw error.message;
            // console.error(error);
            // toast.error(error.message);
        )
    

component.js

const getData = async () => 
            const asyncExample = async () => 
                const result = await networkServices.axiosCall("/api/v1/calendars");
                
                const responseData = await result;
                console.log(responseData);
                return responseData;
            

            const data = asyncExample()

            data.then(function(result) 
                console.log(result); // "Some User token"
            )
        

尝试在 const 结果中从服务获取数据到我的组件，控制台表单服务正在整理数据，但组件始终返回未定义而不是来自服务文件的数据。 SetTimeout 函数在组件中也不起作用。

【问题讨论】：

尝试在 "const data= await asyncExample()" 中使用 await，因为它是等待响应的代码

这能回答你的问题吗？ How to return the response from an asynchronous call

@NaveenkumarM 已经尝试过了.. 没有帮助！

我建议你看一下关于 Promises 的文档：developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

axiosCall 函数没有返回 axios 承诺。在调用axios 之前添加return 语句，即return axios.get(...)。

【参考方案1】：

你有很多错误。我建议您查看有关Promises的文档

第一个：

您不会在axiosCall 中返回数据 返回数据的一种方式：

axiosCall = (axiosURL) => new Promise((resolve, reject) => 
    axios.get(axiosURL, 
        headers: 
            'Authorization': `yourTokenHere`,
        
    ).then((res) => 
        // return a response data
        resolve(res.data);
    ).catch((error) => 
        // return only error message
        reject(error.message);
    )
)

使用axiosCall:

try 
                                 // don't forgot to configure axios with base url
    const data = await axiosCall('/api/v1/calendars');

    // do something with your data

 catch (e) 

    // do something with error message
    console.log(e);

第二：

你在调用异步函数时出错

看这个例子：

const getData = () => 
    networkServices
        .axiosCall("/api/v1/calendars")
        .then(function(result) 
            // when promise resolve
            console.log(result);
        )
        .catch(error => 
            // when promise reject
            console.log(error)
        )