Um guia completo para trabalhar com o Axios

Axios é uma biblioteca JavaScript que fornece uma API simples para enviar solicitações HTTP de código JavaScript do lado do cliente ou código Node.js do lado do servidor. O Axios é construído na API Promise do JavaScript, o que torna o código assíncrono mais fácil de manter.

Introdução ao Axios

Você pode utilizar o Axios em seu aplicativo usando uma rede de entrega de conteúdo (CDN) ou instalando-o em seu projeto.

Para usar o Axios diretamente em HTML, copie o link CDN abaixo e insira-o na seção head do seu arquivo HTML:

<roteiroorigem=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">roteiro>

Com esta abordagem, você pode usar o Axios e seus métodos HTTP no corpo de seus scripts HTML. Axios também pode consumir APIs REST em uma estrutura como React.

Para usar o Axios em um projeto Node.js, instale-o no diretório do projeto usando o gerenciador de pacotes npm ou yarn:

npm instalar axios
# ou
fio adicionar axios

Após a instalação, você pode começar a usar o Axios em seu projeto JavaScript:

const axios = exigir('axios');

Ao longo deste guia, você trabalhará com o software gratuito JSONPlaceholder API. Embora esta API tenha um conjunto de recursos, você utilizará apenas os /comments e /posts pontos de extremidade. Endpoints são URLs específicos que podem ser acessados ​​para recuperar ou manipular dados.

Fazendo solicitações GET com Axios

Existem várias maneiras de fazer uma solicitação GET usando o Axios. No entanto, a sintaxe geralmente depende da preferência.

Uma das maneiras de fazer uma solicitação GET é usando o método axios() método com um objeto que especifica o método de solicitação como pegar e a URL para onde enviar a solicitação.

Por exemplo:

const axios = exigir("axios");
axios({
 método: "pegar",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .então((res) => {
console.log (res.data);
 })
 .pegar((errar) => {
console.erro (erro);
 });

Este exemplo cria uma promessa usando o modelo de programação assíncrona encadeando o .então() e .pegar() métodos. A promessa registra a resposta no console quando a solicitação é bem-sucedida e registra a mensagem de erro se a solicitação falhar.

O Axios também fornece uma maneira mais fácil de fazer solicitações GET que eliminam a necessidade de passar um objeto encadeando o .pegar() método para o axios instância.

Por exemplo:

axios
 .pegar(" https://jsonplaceholder.typicode.com/comments")
 .então((res) => {
console.log (res.data);
 })
 .pegar((errar) => {
console.erro (erro);
 });

Fazendo solicitações POST com Axios

Fazer uma solicitação POST com Axios é semelhante a fazer uma solicitação GET. Você pode enviar dados para um servidor usando esta solicitação.

O trecho de código abaixo é um exemplo de como usar o Axios' .publicar() método:

axios
 .publicar(" https://jsonplaceholder.typicode.com/comments", {
 nome: "Jackson Smith",
 e-mail: "[email protected]",
 corpo: "Esta e uma obra de arte.",
 })
 .então((res) => {
console.log (res.data);
 })
 .pegar((errar) => {
console.erro (erro);
 });

O código faz uma solicitação POST à ​​API JSONPlaceholder para criar um novo comentário. O axios.post método envia dados para o /comments ponto final.

Os dados enviados na requisição são um objeto com um nome, e-mail, e corpo propriedade. Se a solicitação for bem-sucedida, o então O método registra os dados de resposta no console. E se houver um erro, o pegar O método registra o erro no console.

Fazendo solicitações PUT/PATCH com Axios

Você pode usar a solicitação PUT ou PATCH para atualizar um recurso existente no servidor. Enquanto PUT substitui todo o recurso, PATCH atualiza apenas os campos especificados.

Para fazer uma solicitação PUT ou PATCH com o Axios, você precisa usar o .colocar() ou .correção() métodos respectivamente.

Aqui está um exemplo de como usar esses métodos para atualizar o e-mail propriedade do comentário com um id de 100:

const axios = exigir("axios");
axios
 .pegar(" https://jsonplaceholder.typicode.com/comments/100")
 .então((res) => {
console.log (res.data.email);
 })
 .pegar((errar) => {
console.erro (erro);
 });
// Saída:
// '[email protected]'
axios
 .correção(" https://jsonplaceholder.typicode.com/comments/100", {
 e-mail: "[email protected]",
 })
 .então((res) => {
console.log (res.data.email);
 })
 .pegar((errar) => {
console.erro (erro);
 });
// Saída:
// '[email protected]',

Este programa primeiro faz uma solicitação GET para o endpoint " https://jsonplaceholder.typicode.com/comments/100". Em seguida, ele registra o e-mail propriedade do comentário com um ID de 100 para o console. Estamos fazendo uma requisição GET para que você veja o que mudou após fazer a requisição PATCH.

A segunda solicitação é uma solicitação PATCH para o mesmo endpoint. Este código atualiza o e-mail do comentário para [email protected].

Fazendo solicitações DELETE com Axios

Você pode usar o EXCLUIR solicitação para excluir um recurso no servidor.

Veja o exemplo a seguir de como usar o .excluir() método para excluir um recurso do servidor:

axios
 .excluir(" https://jsonplaceholder.typicode.com/comments/10")
 .então((res) => {
console.log (res.data);
 })
 .pegar((errar) => {
console.erro (erro);
 });
//Output:
// {}

Ao registrar um objeto vazio no console, o código acima mostra que ele excluiu o comentário com o ID 10.

Fazendo solicitações simultâneas com o Axios

Você pode buscar dados de vários endpoints ao mesmo tempo usando o Axios. Para fazer isso, você precisa usar o .todos() método. Esse método aceita uma matriz de solicitações como parâmetro e resolve somente quando você recebe todas as respostas.

No exemplo a seguir, o .todos() O método recupera dados de dois endpoints simultaneamente:

axios
 .todos([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limite=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limite=2"),
 ])
 .então(
 axios.spread((comentários, postagens) => {
console.log (comentários.dados);
console.log (postagens.dados);
 })
 )
 .pegar((errar) =>console.erro (erro));

O bloco de código acima envia solicitações simultaneamente e passa as respostas para o .então() método. Axios .espalhar() O método separa as respostas e atribui cada resposta à sua variável.

Finalmente, o console registra o dados propriedade das duas respostas: comentários e postagens.

Interceptando Pedidos com Axios

Às vezes, pode ser necessário interceptar uma solicitação antes que ela chegue ao servidor. Você pode usar o Axios interceptors.request.use() método para interceptar solicitações.

No exemplo a seguir, o método registra o tipo de solicitação no console para cada solicitação feita:

axios.interceptors.request.use(
 (configuração) => {
console.registro(`${config.method} pedido feito`);
retornar configuração;
 },
 (erro) => {
retornarPromessa.reject (erro);
 }
);
axios
 .pegar(" https://jsonplaceholder.typicode.com/comments? _limite=2")
 .então((res) =>console.log (res.dados))
 .pegar((errar) =>console.erro (erro));

O programa define um interceptor Axios usando o axios.interceptors.request.use método. Este método leva configuração e erro objetos como argumentos. O configuração O objeto contém informações sobre a solicitação, incluindo o método de solicitação (config.método) e a URL da solicitação (config.url).

A função interceptora retorna o configuração objeto, permitindo que a requisição prossiga normalmente. Se houver um erro, a função retorna o rejeitado Promessa objeto.

Por fim, o programa faz uma solicitação para testar o interceptador. O console registrará o tipo de solicitação feita, neste caso, uma solicitação GET.

Há mais no Axios

Você aprendeu como fazer e interceptar solicitações em seus projetos usando o Axios. Muitos outros recursos, como transformar solicitações e usar instâncias do Axios, estão disponíveis para você como desenvolvedor JavaScript explorar. Axios continua sendo uma opção preferencial para fazer solicitações HTTP em seus aplicativos JavaScript. No entanto, Fetch API é outra boa opção que você pode explorar.