Como fazer requisições HTTP com Axios em 2024

Axios é uma biblioteca JavaScript popular que simplifica o processo de fazer requisições HTTP a partir de uma aplicação web. Ela fornece uma interface fácil de usar para enviar e receber dados de APIs, e é amplamente utilizada por desenvolvedores ao redor do mundo.

Neste post do blog, discutiremos como fazer requisições HTTP com Axios, uma biblioteca JavaScript popular para fazer requisições HTTP, e forneceremos amostras de código para demonstrar seu uso, depois daremos algumas dicas e truques para gerar seu código usando o Apidog.

Se você é um desenvolvedor experiente ou está apenas começando com o desenvolvimento web, este post fornecerá o conhecimento que você precisa para usar o Axios de forma eficaz e eficiente. Então, vamos começar!

O que é Axios?

Axios é uma biblioteca JavaScript que permite fazer requisições HTTP a partir do seu código JavaScript. É uma biblioteca baseada em promessas que fornece uma interface fácil de usar para fazer requisições HTTP. Axios é amplamente utilizado na comunidade JavaScript e é conhecido por sua simplicidade e flexibilidade. Axios é uma API HTTP cliente baseada na interface XMLHttpRequest fornecida pelos navegadores.

Por que usar Axios?

Axios oferece várias vantagens em relação a outras bibliotecas HTTP. Aqui estão algumas razões para você usar Axios:

• Baseado em promessas: Axios é baseado em promessas, o que facilita o tratamento de operações assíncronas. Isso significa que você pode usar a sintaxe async/await para tornar seu código mais legível e mais fácil de manter.
• Interface simples e intuitiva: Axios fornece uma interface simples e intuitiva para fazer requisições HTTP. Você pode usar os métodos axios.get(), axios.post(), axios.put() e axios.delete() para fazer requisições GET, POST, PUT e DELETE, respectivamente.
• Transformação automática de dados JSON: Axios transforma automaticamente os dados JSON para você, facilitando o trabalho com APIs que retornam dados JSON.
• Suporte a navegadores mais antigos: Axios fornece vários recursos que facilitam o trabalho com navegadores mais antigos. Por exemplo, ele oferece suporte ao XMLHttpRequest, que é usado por navegadores mais antigos para fazer requisições HTTP.
• Boas configurações padrão: Axios possui boas configurações padrão para trabalhar com dados JSON. Ao contrário de alternativas como a Fetch API, você muitas vezes não precisa definir seus cabeçalhos ou realizar tarefas tediosas, como converter seu corpo de requisição em uma string JSON.
• Melhor tratamento de erros: Axios lança erros nas faixas de 400 e 500 para você. Ao contrário da Fetch API, onde você deve verificar o código de status e lançar o erro você mesmo.
• Interceptadores: Axios fornece interceptadores que permitem interceptar requisições ou respostas antes que sejam tratadas por then ou catch.

Instalando Axios

Para instalar o Axios, você pode usar o gerenciador de pacotes Node.js (npm) ou yarn. Aqui está como instalar o Axios usando npm:

npm install axios

E aqui está como instalar o Axios usando yarn:

yarn add axios

Se preferir usar pnpm, você pode instalar Axios usando o seguinte comando:

pnpm install axios

Alternativamente, você pode usar uma rede de entrega de conteúdo (CDN) para incluir o Axios em seu projeto. Aqui está como incluir o Axios usando uma CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Uma vez que você tenha instalado o Axios, você pode começar a fazer requisições HTTP com ele. Axios fornece uma interface simples e intuitiva para fazer requisições HTTP. Você pode usar os métodos axios.get(), axios.post(), axios.put() e axios.delete() para fazer requisições GET, POST, PUT e DELETE, respectivamente.

Fazendo requisições HTTP com Axios

Agora que temos o Axios instalado, vamos dar uma olhada em como fazer requisições HTTP com Axios. Axios fornece vários métodos para fazer requisições HTTP, incluindo GET, POST, PUT e DELETE.

Como fazer uma requisição GET com Axios

Enviar uma requisição HTTP com Axios é direto; você simplesmente passa um objeto de configuração para a função axios. Para enviar uma requisição GET com Axios, você pode usar o método axios.get(). Aqui está um exemplo de como usá-lo:

axios.get('https://your-api-endpoint.com')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Neste exemplo, axios.get() é usado para enviar uma requisição GET para o endpoint da API especificado. O método .then() é usado para tratar a resposta do servidor, enquanto o método .catch() é usado para tratar quaisquer erros que possam ocorrer durante a requisição.

Se você precisar passar parâmetros com sua requisição GET, você pode fazer isso anexando-os à URL. Por exemplo:

axios.get('https://your-api-endpoint.com?param1=value1&param2=value2')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Aqui, param1 e param2 são os nomes dos parâmetros que estão sendo passados, enquanto value1 e value2 são seus respectivos valores.

Enviando uma requisição POST com Axios

Quando você usa o Axios para fazer uma requisição POST, você pode "postar" dados para um endpoint específico e desencadear eventos. Para fazer uma requisição POST com Axios, você pode usar o método axios.post(). Aqui está um exemplo:

axios.post('https://api.example.com/data', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Neste exemplo, estamos enviando uma requisição POST para https://api.example.com/data. Também estamos enviando alguns dados junto com a requisição. Quando a requisição é concluída, estamos logando os dados da resposta no console. Se houver um erro, estamos logando o erro no console.

Fazendo uma requisição PUT com Axios

Para fazer uma requisição PUT com Axios, você pode usar o método axios.put(). Aqui está um exemplo de como usá-lo:

axios.put('/api/article/123', {
  title: 'Fazendo Requisições PUT com Axios',
  status: 'published'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Neste exemplo, axios.put() é usado para enviar uma requisição PUT para o endpoint da API especificado. O método .then() é usado para tratar a resposta do servidor, enquanto o método .catch() é usado para tratar quaisquer erros que possam ocorrer durante a requisição.

Se você precisar passar parâmetros com sua requisição PUT, pode fazê-lo incluindo-os no corpo da requisição. Por exemplo:

axios.put('/api/article/123', {
  title: 'Fazendo Requisições PUT com Axios',
  status: 'published',
  param1: 'value1',
  param2: 'value2'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Aqui, param1 e param2 são os nomes dos parâmetros que estão sendo passados, enquanto value1 e value2 são seus respectivos valores.

Como enviar uma requisição DELETE com Axios?

Para enviar uma requisição DELETE com Axios, você pode usar o método axios.delete(). Aqui está um exemplo de como usá-lo:

axios.delete('/api/article/123')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Neste exemplo, axios.delete() é usado para enviar uma requisição DELETE para o endpoint da API especificado. O método .then() é usado para tratar a resposta do servidor, enquanto o método .catch() é usado para tratar quaisquer erros que possam ocorrer durante a requisição.

Se você precisar passar parâmetros com sua requisição DELETE, pode fazê-lo incluindo-os no corpo da requisição. Por exemplo:

axios.delete('/api/article/123', {
  data: {
    param1: 'value1',
    param2: 'value2'
  }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Aqui, param1 e param2 são os nomes dos parâmetros que estão sendo passados, enquanto value1 e value2 são seus respectivos valores.

Usando Axios com async e await

async e await são palavras-chave do JavaScript que permitem que você escreva código assíncrono em um estilo síncrono. Ao usar async e await com Axios, você pode escrever um código mais limpo e legível.

Para usar o Axios com async e await, você pode usar os métodos axios.get(), axios.put() e axios.delete(). Aqui estão exemplos de como usá-los:

async function getData() {
  try {
    const response = await axios.get('https://your-api-endpoint.com');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

async function putData() {
  try {
    const response = await axios.put('/api/article/123', {
      title: 'Fazendo Requisições PUT com Axios',
      status: 'published'
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

async function deleteData() {
  try {
    const response = await axios.delete('/api/article/123', {
      data: {
        param1: 'value1',
        param2: 'value2'
      }
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Nesses exemplos, axios.get(), axios.put() e axios.delete() são usados para enviar requisições GET, PUT e DELETE para os endpoints da API especificados, respectivamente. O bloco try é usado para tratar a resposta do servidor, enquanto o bloco catch é usado para tratar quaisquer erros que possam ocorrer durante a requisição.

Se você precisar passar parâmetros com sua requisição GET ou DELETE, você pode fazer isso anexando-os à URL ou incluindo-os no corpo da requisição, respectivamente. Por exemplo:

async function getDataWithParams() {
  try {
    const response = await axios.get('https://your-api-endpoint.com?param1=value1&param2=value2');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

async function deleteDataWithParams() {
  try {
    const response = await axios.delete('/api/article/123', {
      data: {
        param1: 'value1',
        param2: 'value2'
      }
    });
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Quando você utiliza a sintaxe async e await, é comum envolver seu código em um bloco try-catch. Essa abordagem garante que você trate erros de forma eficaz e forneça feedback para uma melhor experiência do usuário.

Apidog: uma ferramenta gratuita para gerar seu código Axios

Apidog é uma plataforma colaborativa de desenvolvimento de API tudo-em-um que fornece um conjunto abrangente de ferramentas para projetar, depurar, testar, publicar e simular APIs. Apidog permite que você crie automaticamente código Axios para fazer requisições HTTP.

Aqui está o processo para usar o Apidog para gerar código Axios:

Passo 1: Abra o Apidog e selecione nova requisição

Passo 2: Insira a URL do endpoint da API para o qual você deseja enviar uma requisição, inclua quaisquer cabeçalhos ou parâmetros de string de consulta que deseja incluir com a requisição, em seguida, clique em "Design" para mudar para a interface de design do Apidog.

Passo 3: Selecione "Gerar código do cliente" para gerar seu código.

Passo 4: Copie o código Axios gerado e cole-o em seu projeto.

Usando Apidog para Enviar Requisições HTTP

Apidog oferece vários recursos avançados que aprimoram ainda mais sua capacidade de testar requisições HTTP. Esses recursos permitem que você personalize suas requisições e lide com cenários mais complexos sem esforço.

Passo 1: Abra o Apidog e crie uma nova requisição.

Passo 2: Encontre ou insira manualmente os detalhes da API para a requisição POST que você deseja fazer.

Passo 3: Preencha os parâmetros necessários e quaisquer dados que você deseja incluir no corpo da requisição.

Conclusão

Axios é muito apreciado pelos desenvolvedores por uma boa razão. Neste artigo, cobrimos como utilizar o Axios para fazer requisições HTTP. Cobrimos os fundamentos do Axios, incluindo o que é, por que você deve usá-lo e como instalá-lo.

Ao entender como fazer requisições HTTP com o Axios, você pode aprimorar suas aplicações web. Com a ajuda do Axios e ferramentas como o Apidog, você pode agilizar o processo de fazer requisições HTTP e se concentrar em construir aplicações robustas e eficientes.

Usar o Apidog não só economiza seu tempo e esforço valiosos, mas também garante que seu código esteja preciso e livre de erros. Com sua interface amigável e recursos intuitivos, o Apidog é uma ferramenta indispensável para qualquer desenvolvedor que trabalhe com requisições Axios.