Способы получения данных из API

В этом блоге мы узнаем, как получать и отображать данные из API и использовать их в приложении ReactJS. Существует несколько способов получения данных в приложении React, и мы расскажем вам об этом. эти методы. С помощью API мы можем получать данные с серверов и отображать их в нашем приложении. Давайте сначала разберемся, что такое API.

Метод Fetch:Метод fetch() в JavaScript используется для запроса данных с сервера. Запрос может относиться к API любого типа, который возвращает данные в формате JSON или XML. Метод fetch() требует один параметр — запрашиваемый URL-адрес и возвращает обещание.

import React, { useEffect, useState } from "react";

function App() { 
  const [user, setUser] = useState([]);

  const fetchData = () => {
    return fetch("https://api.example.com/users")
          .then((response) => response.json())
          .then((data) => setUser(data));
  }

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

  return (
    <main>
      <h1>User List</h1>
      <ul>
        {user && user.length > 0 && user.map((userObj, index) => (
            <li key={userObj.id}>{userObj.name}</li>
          ))}
      </ul>
    </main>
  );
}

export default App;

Axios.Axios – популярная сторонняя библиотека для выполнения HTTP-запросов. Это упрощает процесс отправки запросов и обработки ответов. Он также предоставляет такие функции, как перехватчики и автоматический анализ JSON.

import axios from 'axios';
async function fetchData() {
    try {
      const response = await axios.get("https://api.example.com/users")
      setUser(response.data)
    } catch (error) {
      console.error(error);
    }
  }

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

Async/Await с помощью Fetch или Axios. Вы можете использовать современный синтаксис async/await, чтобы сделать код более читабельным при работе с асинхронными операциями. Это можно сделать как с помощью Fetch API, так и с помощью Axios.

async function fetchData() {
 try {
 const response = await fetch('https://api.example.com/data');
 const data = await response.json();
 // Handle data
 } catch (error) {
 // Handle error
 }
}

Хук useEffect в React: Хук useEffect обычно используется для получения данных при монтировании компонента или при изменении определенных зависимостей. Вы можете использовать Fetch API, Axios или любой другой метод получения данных в функции useEffect.

npm i react-fetch-hook

import useFetch from "react-fetch-hook"

const {data} = useFetch("https://jsonplaceholder.typicode.com/users");
console.log(data);
import { useEffect, useState } from "react";
import axios from "axios";

const useFetch = (method, url, body) => {
  const [isLoading, setIsLoading] = useState(false);
  const [apiData, setApiData] = useState([]);
  const [apiError, setApiError] = useState('');

  useEffect(() => {
    setIsLoading(true);
    const fetchData = async () => {
      try {
        const response = await axios({
          method: method,
          url: url,
          data: body
        });
        const data = await response?.data;

        setApiData(data);
        setIsLoading(false);
      } catch (error) {
        setApiError(error);
        setIsLoading(false);
      }
    };

    fetchData();
  }, [url, method, body]);

  return { isLoading, apiData, apiError };
};

export default useFetch;

App.js

import useFetch from "../src/useFetch";

function App() { 
  const { isLoading, apiError, apiData } = useFetch(
    "GET",
    "https://api.example.com/users",
    {}
  );

React Query и SWR (устаревшие при повторной проверке): это сторонние библиотеки, предназначенные для упрощения получения данных и управления состоянием в приложениях React. Они предлагают такие функции, как кэширование, автоматическая повторная выборка и многое другое, что упрощает управление сложными сценариями получения данных.

import useSWR from 'swr'
 
function Profile() {
 const { data, error, isLoading } = useSWR('/api/user', fetcher)
 
 if (error) return <div>failed to load</div>
 if (isLoading) return <div>loading…</div>
 return <div>hello {data.name}!</div>
}

В этом примере перехватчик useSWR принимает строку ключа и функцию выборки. Ключ — это уникальный идентификатор данных (обычно URL-адрес API), который будет передан сборщику. Сборщиком может быть любая асинхронная функция, возвращающая данные. Вы можете использовать встроенную выборку или такие инструменты, как Axios.

Хук возвращает 3 значения: данные, isLoading и ошибку, в зависимости от статуса запроса.

Желаем вам приятных впечатлений и увидимся в следующий раз! 🐈‍⬛

Способы получения данных из API

Вопросы по теме