Axios

Status: Finalizado ✅

O Axios é um biblioteca de cliente HTTP baseado em Promises para fazer requisições, ele pode ser utilizado tanto no navegador quanto no Node.js ou em qualquer outro serviço de API, ele permite a integração do nosso projeto em React para qualquer serviço de API disponível.

Documentação Oficial

Consulte a Documetação Oficial do Axios..

Instalação no Axios no projeto

Para fazer a instalação do axios, você deve ter um projeto React criado. Depois, é só usar o comando abaixo:

Com npm:

npm install axios

Com yarn:

yarn install axios

Solicitações com Axios

Para utilizar o Axios em seu projeto, primeiro deve importar ele:

import axios from "axios";

Essas são algumas das requisições que podemos fazer em nossa api com o axios:

• Get
• Post
• Put
• Delete

GET

É utilizado para obter dados da nossa API, veja o exemplo:

const url = "https://exemploapi.com";

function getUser( ){
  axios.get( url )
  .then( ( ) => alert( "Requisição feita com sucesso!!" ) )
  .catch( error => console.log( error ) )
}

getUser()

axios.get recebe como parametro parametro o endereço da api. O .then é executado caso a requisição seja feita com sucesso, caso não, .catch é executado mostrando o erro no console.

POST

É usado para criar dados e envia-los para a api.

const url = "https://exemploapi.com";

const newUser = {
        name: "Fulano",
        age: 28
      };

function postUser( ){
  axios.post( url, newUser )
  .then( ( ) => alert( "Dado cadastrado com sucesso!!" ) )
  .catch( error => console.log( error ) )
}

postUser()

O axios.post recebe como primero parametro a url da api, e o que vai ser cadastrado nela como segundo parametro. Novamente .then é executado caso o post seja feita com sucesso, caso contrário, .catch é executado mostrando o erro no console.

PUT

É utilizada para atualizar um determinado dado na api.

const url = "https://exemploapi.com";

const userUpdated = {
        name: "Novo Fulano",
        age: 43
      };

function updateUser( ){
  axios.put( `${url}/12`, userUpdated )
  .then( ( ) => alert( "Dado atualizado com sucesso!!" ) )
  .catch( error => console.log( error ) )
}

updateUser()

O .put recebe como parametro a url da api com o ID do dado a ser modificado '${url}/12', e o segundo parametro é o dado que vai ser inserido na api para atualizar.

DELETE

É utilizado para deletar alguma informação da api. Como parametro, a url deve indicar o id da informação a ser deletada.

const url = "https://exemploapi.com";

function deleteUser( ){
  axios.put( `${url}/12` )
  .then( ( ) => alert( "Usuário deletado!" ) )
  .catch( error => console.log( error ) )
}

deleteUser()

O id é passado na url utilizando tampletes strings.

Deve se levar em conta que é um exemplo de código, a forma como o Id é passado na url varia de cada api, por via das dúvidas, leia a documntação da api que você vai consumir.