Como usar Axios no React

Neste artigo, você aprenderá a usar a biblioteca Axios no React.



Vamos olhar tudo usando o exemplo de requisições ao servidor, exibir os dados recebidos em uma tabela, passar o componente de verificação de carga e tudo isso usando React Hooks.

O que é Axios?

Axios é um dos clientes HTTP mais populares para navegadores e node.js. baseado em promessas.



O Axios possui suporte para requisições, recebendo respostas do servidor, transformando-as e convertendo-as automaticamente para JSON.



Antes de começar, vamos criar um novo projeto React:

npx create-react-app react-axios-table

Vamos entrar nisso:

cd react-axios-table

Dados do projeto

Usaremos uma série de objetos como dados para nosso projeto:

[
	{
		id: 101,
		firstName: 'Sue',
		lastName: 'Corson',
		email: 'DWhalley@in.gov',
		phone: '(612)211-6296',
		address: {
			streetAddress: '9792 Mattis Ct',
			city: 'Waukesha',
			state: 'WI',
			zip: '22178'
		},
		description: 'et lacus magna dolor...',
	}
]

Link para dados

Configurando um componente para funcionar com Axios

Carregue a biblioteca Axios:

npm i axios

Importamos axios para o componente a partir do qual enviaremos solicitações ao servidor:

import axios from 'axios'

Porque no projeto, usamos React Hooks, importamos useState e useEffect (leia mais sobre ganchos no react aqui ):

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

Em seguida, adicione o seguinte código ao componente:

function App() {
  
  const [appState, setAppState] = useState();
  
  useEffect(() => {
    const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
    axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState(allPersons);
    });
  }, [setAppState]);

 
  return (
    <div className="app">
    
    </div>
  );
}

export default App;

Vamos dar uma olhada no código:

const [appState, setAppState] = useState();

Responsável pelo estado do estado no componente:

 useEffect(() => {}, [setAppState])

useEffect monitorará as alterações de setAppState e renderizará novamente, se necessário

 const apiUrl=''

nós substituímos nosso link aqui

axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState(allPersons);
    });

envie uma solicitação get para o servidor e salve os dados JSON recebidos no estado

Baixar componente de verificação

Crie uma pasta de componentes em src . Nele, crie o componente UserData.js e adicione o seguinte código:

function UserData(props) {

    const { persons } = props

    if (!persons || persons.length === 0) return <p> .</p>

    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>firstName</th>
                        <th>lastName</th>
                        <th>email</th>
                        <th>phone</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        persons.map((person) =>
                            <tr key={person.id}>
                                <td>{person.id}</td>
                                <td>{person.firstName}</td>
                                <td>{person.lastName}</td>
                                <td>{person.email}</td>
                                <td>{person.phone}</td>
                            </tr>
                        )
                    }
                </tbody>
            </table>
      </div>
    )
}

export default UserData

Vamos transferir os dados recebidos do servidor para os adereços do componente.

 if (!persons || persons.length === 0) return <p> .</p>

verifique se há dados do servidor

{
                        persons.map((person) =>
                            <tr key={person.id}>
                                <td>{person.id}</td>
                                <td>{person.firstName}</td>
                                <td>{person.lastName}</td>
                                <td>{person.email}</td>
                                <td>{person.phone}</td>
                            </tr>
                        )
                    }

Usando o método map , percorremos o array com as pessoas, criamos uma string para cada pessoa. Não se esqueça da chave .



Na pasta de componentes , crie LoadingPersonsData.js e cole o seguinte código:

function OnLoadingUserData(Component) {
    return function LoadingPersonsData({ isLoading, ...props }) {
        if (!isLoading) return <Component {...props} />

        else return (
            <div>
                <h1>,  !</h1>
            </div>
        )
    }
}

export default LoadingPersonsData

O código acima é um componente de ordem superior no React. Ele pega outro componente como suporte e, em seguida, retorna alguma lógica. Em nosso caso, o componente verifica o isLoading . Enquanto os dados estão carregando, exibimos a mensagem de carregamento, assim que isLoading for false, retornamos o componente com os dados.



Vamos fazer alterações em nosso App.js para poder verificar o carregamento de dados. Vamos



importar nossos componentes para App.js :

import UserData from './components/UserData'
import OnLoadingUserData from './components/OnLoadingUserData'

Adicione o seguinte código:

function App() {

  const DataLoading =  LoadingPersonsData(UserData);

  const [appState, setAppState] = useState(
    {
      loading: false,
      persons: null,
    }
  )

 useEffect(() => {
    setAppState({loading: true})
    const apiUrl = 'http://www.filltext.com/?rows=32&id={number|1000}&firstName={firstName}&lastName={lastName}&email={email}&phone={phone|(xxx)xxx-xx-xx}&address={addressObject}&description={lorem|32}';
    axios.get(apiUrl).then((resp) => {
      const allPersons = resp.data;
      setAppState({
      loading: false,
      persons: allPersons
       });
    });
  }, [setAppState]);


  return (
    <div className="app">
        <DataLoading isLoading={appState.loading} persons={appState.persons} />
    </div>
  );
}

export default App;

 const DataLoading =  LoadingPersonsData(UserData);

Nós criamos um novo componente, o igualamos ao nosso componente de ordem superior e envolvemos um UserData (componente de exibição de dados) com ele.



Adicionamos uma nova propriedade de carregamento: false ao estado , pelo qual determinaremos o carregamento de dados do servidor.

<DataLoading isLoading={appState.loading} persons={appState.persons} />

Renderize o componente e passe os adereços para o nosso componente de ordem superior.



Vamos adicionar alguns css e ao carregar os dados veremos a seguinte janela:







E agora, quando a requisição get para o servidor for completada com sucesso, os dados são recebidos:







Agora sabemos como usar o get Axios com a API REST.



Se você tiver dúvidas ou sugestões, deixe-as nos comentários. Terei todo o prazer em responder.