Como fazer solicitações HTTP no JavaScript usando AXIOS | Explicado com exemplos

Axios é estritamente uma biblioteca JavaScript baseada em promessa que pode ser incluída em seu projeto usando o Node Package Manager (NPM) ou Axios hospedados em CDN. É usado para fazer xmlHttPrequest do navegador, bem como solicitações HTTP de projetos criados com o NodeJS. Como pode funcionar com projetos de nó e para navegadores, é frequentemente referido como um módulo isomórfico.

É um cliente HTTP, o que significa que podemos usar seu PEGAR, PUBLICAR, e EXCLUIR Métodos para interagir com APIs

Configurando axios em seu projeto

Se você estiver trabalhando com o pacote Node Gerenciar, poderá baixar o Axios digitando o seguinte comando no terminal do seu editor de código:

$ npm install axios

Se você estiver trabalhando com JavaScript de baunilha, poderá incluir o AXIOS hospedado no CDN no seu arquivo HTML usando a seguinte linha:

Também para testar o AXIOS, usaremos a API simulada fornecida por Req | Res. E o URL da API é “https: // reqres.in/api/usuários ”.

Como é um tutorial para mostrar como trabalhar com o Axios para fazer solicitações HTTP, portanto, não manipularemos com elementos html. Temos apenas as seguintes linhas na página da web html:

Solicitações HTTP do AXIOS

Obtenha solicitação com axios

Fazer PEGAR Solicitações à API usando API Usamos a seguinte sintaxe:

Axios.Get (URL).então (resposta => ).captura (erro => ());

Vamos usar esta sintaxe para fazer uma solicitação de obter para o req | API do usuário res:

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

Mas queremos embrulhar esse método Get em uma função; portanto, use as seguintes linhas de código:

const getUsers = () =>
Axios
.get ("https: // reqres.in/api/usuários ")
.então ((resposta) =>
const usuários = resposta.dados.dados;
console.log ('obtenha usuários', usuários);
)
.Catch ((Erro) => Console.erro (erro));
;

Agora, tudo o que precisamos fazer é chamar a função getUesrs () Com a seguinte linha de código:

getUsers ();

Ao executar o arquivo HTML, você verá os seguintes resultados:

Se expandirmos esta entrada, poderemos ver a resposta da API com muito mais clareza:

Fizemos um sucesso PEGAR solicitar usando axios e imprimir a resposta ao console.

Pós -solicitação com axios

Para fazer uma solicitação de postagem com o Axios, você precisa usar a seguinte sintaxe:

Axios.POST (URL).então ((resposta) => ).captura ((erro));

Para fazer uma solicitação de postagem para o API REQ | RES, Usamos as seguintes linhas de código que criarão um novo usuário:

const CreateUser = (usuário) =>
Axios
.post ("https: // reqres.in/api/usuários ", usuário)
.então ((resposta) =>
const addUser = resposta.dados;
console.log ('post: user é adicionado', adduser);
)
.Catch ((Erro) => Console.erro (erro));
;

Para invocar isso Solicitação de postagem, Precisamos chamar essa função createUser (), Mas antes de fazer isso, precisamos verificar a API sobre que tipo de JSON aceita para uma nova criação de usuários. Então, no site Req | Req, podemos ver o seguinte formato JSON para a solicitação de postagem:

É preciso um "nome" par de valores-chave e um par de valores-chave "Job". Vamos chamar o createUser () função com JSON apropriado dentro dele:

CreateUser (
Nome: "John Doe",
trabalho: "auditor",
);

Execute o arquivo e você verá o seguinte resultado no console do seu navegador:

É isso, fomos capazes de enviar um PUBLICAR solicitação a uma API usando axios.

Excluir solicitação com axios

Para fazer solicitações de exclusão com axios à API, você deve usar a seguinte sintaxe

Axios.Excluir (URL).então ((resposta) => ).capt ((erro) => ());

Para fazer uma solicitação de exclusão à API REQ | RES, use as seguintes linhas de código:

const DeleteUser = (id) =>
Axios
.delete ('https: // reqres.in/api/usuários/$ id ')
.então ((resposta) =>
console.log ('excluir: o usuário é removido', id);
)
.Catch ((Erro) => Console.erro (erro));
;

Tudo o que precisamos fazer é invocar a função DeleteUser usando a seguinte linha:

deleteuser (2);

Execute o arquivo e observe o resultado no console do navegador:

Lá está você, fizemos uma solicitação de exclusão com sucesso para uma API usando axios.

Conclusão

O Axios é um cliente HTTP que pode ser incluído em seus projetos de nós usando o Node Package Manager ou em seu projeto JavaScript de baunilha usando o AXIOS hospedado em CDN. Axios é usado para fazer xmlhttprequests para uma API, e é estritamente uma biblioteca baseada em promessa. Neste post, aprendemos a interagir com uma API externa usando axios e fazer diferentes PEGAR, PUBLICAR e EXCLUIR solicitações para o API.