Блог

Главная - Вопросы по программированию - Проблема при выполнении http-запроса с помощью Axios на сервер

Проблема при выполнении http-запроса с помощью Axios на сервер

#javascript #reactjs #http #axios #next.js

#javascript #reactjs #http #axios #next.js

Вопрос:

Я делаю запрос get на сервер jasonplaceholder для извлечения данных, но когда я делаю запрос в течение некоторого времени, он показывает undefined, а затем поступают все данные, как я могу остановить это undefined и остановить обработку кода до тех пор, пока данные не будут полностью извлечены с сервера

 import React,{useState,useEffect} from 'react'
    import {useRouter} from 'next/router'
    import axios from 'axios'
    
    export default function Portfolio(){
        const router = useRouter();
    
        const [post,setPost] = useState({})
        console.log("323")
        console.log(router.query.id)
        useEffect(() => {
            axios.get(`https://jsonplaceholder.typicode.com/posts/${router.query.id}`)
            .then(res => {
                setPost(res.data)
            })
            .catch(err => {
                console.log(err)
            })
        },[router.query.id])
    
        return (
            <React.Fragment>
                <h1>{`userId : ${post.userId}`}</h1>
                <h1>{`id : ${post.id}`}</h1>
                <h1>{`title : ${post.title}`}</h1>
            </React.Fragment>
        )
    }

Комментарии:

1. привет, добро пожаловать в SO. поскольку запрос является асинхронным, результат возвращается не сразу, вам нужно подождать, пока он не будет полностью возвращен из вызова API. В вашем шаблоне вы можете добавить условие для отображения чего-то еще во время выборки данных. например, ответ @kirakokok

Ответ №1:

 const response = await axios('endpoint');

setPost(response);

Ответ №2:

Вы можете добавить условие при рендеринге кода.

Проверьте приведенный ниже код:

 <React.Fragment>
            <h1>{`userId : ${post amp;amp; post.userId}`}</h1>
            <h1>{`id : ${post amp;amp; post.id}`}</h1>
            <h1>{`title : ${post amp;amp; post.title}`}</h1>
 </React.Fragment>