前端的axios.post不返回ant结果

Posted 2023-02-22

【中文标题】前端的axios.post不返回ant结果

【英文标题】：Axios.post on the front end doesn't return ant result

【发布时间】：2021-12-07 20:20:17

【问题描述】：

这个应用程序的想法是用户在网站主页的搜索栏上输入 Twitter 帐户 ID（比如“nodejs”），然后使用 axios.post 将其发送到服务器。 Express 应用程序使用该字符串从 Twitter API 中提取数据。

我可以获得运行 Express 的控制台上显示的 API 结果，但我无法将结果返回给客户端。它只是什么都不返回。对于网站 URL，它应该是 localhost:3000/dashboard/nodejs，但它以 localhost:3000/?search=nodejs 结尾（输入元素的名称是 'search'）。而且网站不会切换并停留在主页上。

fetchTweets（客户端）：

const fetchTweets = (value, postBody) => 
    console.log('fetched from frontend')
    return (
        axios.post(`/$value`, postBody)
            .then(res => 
                const result = res.data;
                return  result 
            )
    )

handleSubmit（调用 fetchTweets）：

const handleSubmit = async (value) => 
        try 
            const postBody =  twitterId: '0' 
            const res = await fetchTweets(value, postBody);
            console.log(res)
            if (res.result.usernameError) 
                setError('No username found. Please enter a correct username')
                console.log(error)
            
            else if (res.result.serverError) 
                setError('Error Fetching Data from Server')
                console.log(error)
            
            else 
                setTweets(res.result)
                history.push(
                    pathname: `/dashboard/$value`,
                )
            
         catch 
            setError('Error fetching data from server.')
        
    

搜索组件：

<Search 
    onSubmit=async (value) => 
        setError(false);
        setLoading(true);
        handleSubmit(value)
 />

路由器（服务器）：

router.post('/:account', async function (req, res, next) 
  try 
    lastTwitterId = req.body.twitterId;
    twitterObject = await twitter.getTweets(req.params.account.toLowerCase(), lastTwitterId);
    res.status(200).json(twitterObject)
    res.status(200).end();
   catch 
    res.status(501).json( serverError: true )
  
);

【参考方案1】：

这里的问题是fetchTweets() 没有等待 axios 请求。它没有返回任何内容，因为当您返回时请求仍在进行中。

另外，try-catch 是首选而不是 .then().catch()。

例子：

const fetchTweets = (value, postBody) => 
    console.log('fetched from frontend');
    try 
        const response = await axios.post(`/$value`, postBody);
        return response.data;
     catch(err) 
        return err.message;