Рубрики
ajax App Mockon React React-project Веб-Сервер

Запросы к Серверу в React

ВОДОПАД
Метод получения данных

useEffect
хук
засовывает запрос в контекст

fetch
функция принимает два параметра
путь к роуту (пример news по ‘http://127.0.0.1:3004/news’)
дополнительные параметры

асинхронность fetch
необходимо дождаться ответ от сервера через await
функция fetchNews должна быть асинхронной через async

routes\News\News.js

import React from 'react'
import classes from './../../style.module.scss';
import Navbar from './../../modules/Navigation/Navbar';
import Header from './../../modules/Navigation/Header';
import ContextData from './../../context/Data/ContextData';

const News = () =>{

React.useEffect(()=>{
fetch запрос роута News
const fetchNews=async ()=>{
try{
const response = await fetch('http://127.0.0.1:3004/news')
console.log(response)
} catch (e){
console.log(e)
}
}
выполнение асинхронной функции
fetchNews()
},[])

 return (
...
)
}
export default News

в консоли возвращает объект ответ от сервера Response
имеет body, заголовки headers, статус status

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *