DEV Community

Cover image for Como e por que usar o axios?
Matheus Chaves
Matheus Chaves

Posted on

Como e por que usar o axios?

O Axios é uma biblioteca de cliente HTTP para JavaScript que permite fazer solicitações HTTP de maneira fácil e eficiente. Ele é compatível com a maioria dos navegadores e também pode ser usado em aplicativos móveis com React Native.

Ao usar o Axios com React Native, você pode facilmente fazer solicitações HTTP para consumir APIs REST, enviar dados para um servidor ou realizar qualquer outra operação de rede. Além disso, o Axios oferece recursos como interceptadores de solicitação e resposta, que permitem manipular solicitações e respostas de maneira fácil e consistente.

Um dos principais benefícios de usar o Axios com React Native é que ele é compatível com a maioria dos navegadores, o que significa que você pode reutilizar código de rede entre aplicativos da Web e móveis. Além disso, o Axios é fácil de usar e oferece uma sintaxe intuitiva para fazer solicitações HTTP.

Em resumo, o Axios é uma ótima opção para fazer solicitações HTTP em aplicativos móveis com React Native devido à sua compatibilidade com a maioria dos navegadores, facilidade de uso e recursos avançados como interceptadores de solicitação e resposta.

Como adicionar o pacote axios a minha aplicação?

Para adicionar o pacote axios a sua aplicação, você pode usar o gerenciador de pacotes npm ou yarn.

Abra o terminal e vá para o diretório da sua aplicação
Digite o comando npm install axios ou yarn add axios
Isso instalará o pacote axios na sua aplicação e você pode começar a usá-lo.

Para usar o axios em seu código, basta importá-lo da seguinte maneira:

import axios from 'axios';
Enter fullscreen mode Exit fullscreen mode

Ou, se você prefere a sintaxe de require:

const axios = require('axios');
Enter fullscreen mode Exit fullscreen mode

Exemplo de uma requisição: GET, POST, PUT, DELETE

GET: Obter um recurso específico.

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
Enter fullscreen mode Exit fullscreen mode

POST: Criar um novo recurso.

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Enter fullscreen mode Exit fullscreen mode

PUT: Atualizar um recurso existente.

axios.put('/user/12345', {
    firstName: 'Barney',
    lastName: 'Rubble'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Enter fullscreen mode Exit fullscreen mode

DELETE: Excluir um recurso existente.

axios.delete('/user/12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
Enter fullscreen mode Exit fullscreen mode

Esses são apenas alguns exemplos básicos. O axios tem muitas outras opções e configurações disponíveis que você pode explorar na documentação do axios.

Top comments (0)