Асинхронные запросы

1. Как запрашивать данные в ReactJS с fetch

. Определите значение по умолчанию

Вызов fetch() является асинхронным методом, поэтому нам нужно использовать значение по умолчанию до тех пор, пока REST API не вернет ответ. Определение неправильных значений по умолчанию вызовет ошибки JavaScript еще до вызова fetch(), поэтому убедитесь, что значение по умолчанию указано в React JS коде.В нашем случае, так как мы ожидаем массив из вызова API, значением по умолчанию будет пустой массив.

const defaultValue = []

2. Объявите состояние React для хранения данных из API

Нам нужно объявить состояние React для хранения списка пользователей, возвращенного из ответа на вызов API. Обновление состояния с помощью setUsers() гарантирует, что экран обновится после получения списка пользователей из вызова REST API.

// Состояние для хранения списка пользователей
const [users, setUsers] = useState(defaultValue);

3. JavaScript функции для получения данных из API и сохранения ответа

Нам нужно объявить JS-функцию для получения данных с внешнего URL-адреса следующим образом:

1. Мы получаем данные из URL-адреса https://jsonplaceholder.typicode.com/todos/ с помощью JavaScript fetch() API.

2. Добавьте функцию обратного вызова в then() для преобразования ответа в формат JSON.

3. Состояние пользователя React обновляется списком пользователей из ответа API.

// Функция для сохранения данныхconst 
getApiData = async () => { 
 const response = await fetch(    "https://jsonplaceholder.typicode.com/todos/"  ).
 then((response) => response.json());  
 // Обновим состояние  setUsers(response);};

4. Добавьте useEffect для получения API при загрузке страницы

После того, как мы определили функцию для получения данных API, она должна срабатывать при загрузке страницы. getApiData(), добавленный в React useEffect() с пустым массивом зависимостей, который гарантирует, что код срабатывает один раз при загрузке страницы.

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

5. Генерация JSX-кода с состоянием React

Наконец, нам нужно отобразить сведения о каждом пользователе. Следовательно, мы сгенерируем JSX-код для каждого пользователя с помощью Array.map(), а функция обратного вызова вернет <div></div> с user.id и user.title.

<div className="app"> 
  {users.map((user) => (      
  <div className="item-container">        
  Id:{user.id} <div className="title">Title:{user.title}
  </div>      
  </div>   ))}
</div>

6. Вызов API через Axios

Основной недостаток вызова fetch() заключается в том, что нам пришлось вручную конвертировать данные из API в формат JSON. Существует npm пакет axios, который сам управляет преобразованием JSON. После установки npm install axios в package.json, можно реализовать метод getAPIData() через axios следующим образом:

import axios from "axios";
const getApiData = async () => {  
    const response = await axios(    "https://jsonplaceholder.typicode.com/todos/"  );
      setUsers(response);};

Полный код решения

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {  
const [users, setUsers] = useState([]);  
const getApiData = async () => {    
const response = await fetch(      "https://jsonplaceholder.typicode.com/todos/"    )
      .then((response) => response.json());    
      setUsers(response);  
};  
useEffect(() => {   
       getApiData();  
}, []);  
 return (    <div className="app">      
 {users.map((user) => (          
 <div className="item-container">        
     Id:{user.id} <div className="title">Title:{user.title}</div>          </div>  
           ))}    </div>  );}
           
           
 const rootElement = document.getElementById("root");
 ReactDOM.render(<App />, rootElement);