Como instalar e usar axios em javascript

Construir um aplicativo do mundo real geralmente requer interação com APIs enviar e buscar dados; Existem várias maneiras de interagir com APIs. Um dos pacotes que permitem que JavaScript e projetos de nodejs interajam com APIs com sintaxe de código muito simples e direta é axios.

O Axios é um cliente HTTP, usado para fazer xmlhttprequest do navegador, bem como solicitações HTTP de projetos criados com o NodeJS. É frequentemente referido como o cliente HTTP isomórfico, onde os meios isomórficos para nodejs e navegadores (Javascript de baunilha).

Axios fornece métodos como pegar, publicar, e excluir e transforma automaticamente os dados JSON que são algo que os diferencia dos métodos triviais de JavaScript como o buscar() Método da API Fetch.

Instalando Axios em JavaScript

Como já mencionado acima, o AXIOS está presente para o navegador e para o ambiente do nó, o que significa que ele pode ser instalado com NPM e em Javascript de baunilha usando o script Axios hospedado em CDN. Existem várias maneiras de instalar o Axios JavaScript em seu projeto, como:

Usando o Node Package Manager (NPM)

O AXIOS está disponível para a biblioteca da NPM e pode ser facilmente instalado no projeto executando o seguinte comando no terminal do seu editor de código:

$ npm install axios

Usando Bower para instalar axios

Bower está cada vez mais ficando cada vez mais famoso entre as massas. Bower ajuda a instalar pacotes da web, como o NPM. Se você estiver trabalhando com Bower, poderá instalar a Axios usando as seguintes linhas de código:

$ bower install axios

Usando um AXIOS hospedado em CDN

CDN significa redes de entrega de conteúdo, essas redes permitem usar bibliotecas JavaScript hospedadas em seus servidores. Axios pode ser instalado em seu projeto usando um dos dois provedores de AXIOS CDN, o primeiro sendo “JSDELIVR CDN” e o outro sendo o “Unpkg” CDN.

Para JSDELIVR CDN Use o comando no seu arquivo HTML:

Para o Unpkg CDN Use o arquivo HTML de comando:

Com esses comandos acima mencionados, você poderá instalar e usar axios em seus projetos.

Usando axios em javascript

Para demonstrar o uso de Axios que acabamos de instalar usando um dos métodos mencionados acima em um programa JavaScript, precisaremos de uma página da Web HTML. Para esta postagem, vamos escrever as seguintes linhas dentro do arquivo HTML:

Usuários

Como você pode notar no código, fizemos uma lista não ordenada que usaremos para exibir a lista de usuários que obtemos da API.

Isso deve nos dar a seguinte página da web em nosso navegador:

Para demonstrar a busca de dados usando os Axios, vamos usar o Req | Res API e o URL da API é “https: // reqres.in/api/usuários ”. O próximo passo é escrever três funções diferentes em nosso arquivo JavaScript:

• fetch_users (): Isso usará o AXIOS para obter dados da API e enviar os dados para a função AppendTodom ()
• appendtodom (): Isso adicionará o nome do usuário ao
  tag depois de criar um novo item de lista com a ajuda do create_li função
  • create_li (): Isso levará os dados de cada usuário e criará um novo item de lista com apenas o nome do usuário colocado dentro dele:

  A função fetch_user () se parece com a seguinte:

  const fetch_users = () =>
  Axios.get ("https: // reqres.in/api/usuários ").então ((resposta) =>
  const usuários = resposta.dados.dados;
  appendtodom (usuários);
  )
  .Catch ((Erro) => Console.erro (erro));
  ;

  A função AppendTodom () pode ser criada com as seguintes linhas:

  const appendtodom = (usuários) =>
  const ul = documento.QuerySelector ("Ul");
  Usuários.mapa ((usuário) =>
  ul.appendChild (create_li (usuário));
  );
  ;

  E, finalmente, a função create_li () pode ser criada usando as seguintes linhas de código:

  constCreate_li = (usuário) =>
  const li = documento.createElement ("li");
  li.TextContent = '$ Usuário.id: $ usuário.primeiro_name $ usuário.sobrenome';
  retornar li;
  ;

  Agora que codificamos todas as nossas funções, só precisamos invocar a função Fetch_users, mas por isso vamos adicionar um botão em nosso arquivo HTML com as seguintes linhas de código:

  Clique em mim para obter dados

  Agora que temos o nosso botão, podemos executar a função fetch_users () no botão Pressione usando o seguinte código em nosso arquivo de script:

  $ ("#botão").clique (function ()
  fetch_users ();
  );

  O Código HTML completo é como:

  
  
  

  Usuários

  
  
  
  Clique em mim para obter dados
  
  

  O O código JavaScript completo é como:

  $ ("#botão").clique (function ()
  fetch_users ();
  );
  constCreate_li = (usuário) =>
  const li = documento.createElement ("li");
  li.TextContent = '$ Usuário.id: $ usuário.primeiro_name $ usuário.sobrenome';
  retornar li;
  ;
  constappendtodom = (usuários) =>
  const ul = documento.QuerySelector ("Ul");
  Usuários.mapa ((usuário) =>
  ul.appendChild (create_li (usuário));
  );
  ;
  constfetch_users = () =>
  Axios
  .get ("https: // reqres.in/api/usuários ")
  .então ((resposta) =>
  const usuários = resposta.dados.dados;
  appendtodom (usuários);
  )
  .Catch ((Erro) => Console.erro (erro));
  ;

  Ao executar este código, você obterá o seguinte resultado no seu navegador:

  Como você pode ver, somos capazes de buscar dados do API Após o botão pressionar usando Axios em nosso código JavaScript.

  Conclusão

  Axios é um cliente HTTP isomórfico disponível para o ambiente de desenvolvimento de nós e para o Javascript de baunilha. Axios é uma biblioteca estritamente prometida e converte automaticamente os dados que ele busca da API do formato JSON. Para usar o AXIOS em seu projeto, você precisa instalá -lo na biblioteca NPM ou adicioná -lo no seu arquivo html usando um CDN hospedado por Axios. Neste post, aprendemos a instalar e executar o Axios em nosso projeto JavaScript.