Como fazer uma solicitação de postagem em Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Ao criar um aplicativo da Web, pode chegar um momento em que você deseja fazer uma solicitação HTTP para acessar um recurso externo. Por exemplo, suponha que você está começando um blog. Você pode chamar uma API para recuperar uma lista de comentários a serem exibidos em cada postagem do blog.

Axios é uma biblioteca JavaScript popular que você pode usar para fazer solicitações da web. Neste guia, mostraremos como usar o Axios para fazer uma solicitação GET. Veremos alguns exemplos para mostrar como o Axios funciona e como você pode usá-lo em seu código.

Por que o Axios?

Axios é uma biblioteca baseada em promessas que facilita a fazer solicitações da web

Você pode estar se perguntando:. Por que devo usar o Axios em uma das muitas outras bibliotecas de solicitação da Web disponíveis? É verdade que existem outras bibliotecas como extract que você pode usar para fazer solicitações GET, mas o Axios tem uma série de vantagens que essas bibliotecas não têm.

Axios suporta navegadores mais antigos, o que permitirá que você crie uma experiência de usuário mais acessível. O Axios também vem com proteção CSRF integrada para evitar vulnerabilidades. Ele também funciona em Node.js, o que o torna perfeito se você estiver desenvolvendo aplicativos web front-end e back-end.

Como instalar o Axios

Antes de criar uma solicitação GET usando o Axios , você precisa instalar a biblioteca. Você pode fazer isso usando o seguinte comando:

Este comando instalará o Axios e salvará no arquivo local package.json. Agora você está pronto para começar a usar a biblioteca Axios.

Como solicitar a ajuda do Axios

É simples começar a usar o Axios. Para fazer uma solicitação da web, basta especificar a URL da qual você deseja solicitar os dados e o método que deseja usar

Suponha que queremos recuperar uma lista de fatos aleatórios sobre gatos de chat -Facts Poderíamos fazer isso usando este código:.

este código retorna uma promessa que representa uma solicitação que ainda não foi concluída para recuperar os dados dessa solicitação HTTP, você deve use uma função assíncrona / espera como esta:

O servidor wi respondeu com uma lista de fatos do chat.

Quando chamamos esta função, uma solicitação HTTP GET é enviada para a API chat-facts. Usamos uma função assíncrona / de espera para que nosso programa não continue até que a solicitação da web seja concluída. Isso ocorre porque o Axios retorna uma promessa primeiro. Retorna os dados da solicitação feita após a conclusão da solicitação

A biblioteca Axios inclui comandos abreviados que você pode usar para fazer solicitações.

Neste tutorial, focaremos em axios. get() e axios.post(), que usam a mesma sintaxe básica de todos os outros métodos abreviados.

Fazendo solicitações GET usando Axios

No nosso último exemplo, temos a oportunidade do Axios de fazer uma solicitação GET. Mas existe uma maneira mais fácil de fazer uma solicitação GET com o Axios:. Usando

axios.get() Suponha que queremos recuperar uma lista de fatos sobre gatos, ela conta quantos foram retornados. Você pode fazer isso usando o seguinte código:

O código gerou esta resposta: 225 fatos de bate-papo foram retornados

Decompondo nosso código. Primeiro declaramos uma função assíncrona chamada getCatFacts() na qual fazemos uma solicitação da web.

>

Depois usamos axios.get ( ) para recuperar uma lista de fatos de chat da API chat-facts; "Response.data" contém os objetos de resposta e o corpo da solicitação de nossa solicitação.

Finalmente, usamos o .length para calcular quantos fatos de gato foram retornados por nossa solicitação. Em seguida, adicionamos esse número à string " fatos de gato foram retornados.

Enviando cabeçalhos usando Axios

Ao fazer um GET, pode ser necessário enviar um cabeçalho personalizado para o site de recursos que você está solicitando. Uma API que requer autenticação de site. Você pode precisar especificar um cabeçalho de autenticação

<. P> Para especificar um cabeçalho com uma solicitação do Axios, você pode usar o seguinte código:

Este código enviaria o `header` header-name " com o "valor do cabeçalho" para a url que especificamos.

Enviar parâmetros usando Axios

Muitas APIs permitem enviar parâmetros em uma solicitação GET. Por exemplo, uma API pode permitir que você limite o número de respostas retornadas usando um parâmetro limit.

Especificar um parâmetro para enviar com uma solicitação da web é fácil usando o Axios. Você pode incluir o parâmetro como uma string de consulta ou usar a propriedade params. Aqui está um exemplo do Axios fazendo uma solicitação da web usando strings de consulta para especificar um parâmetro:

você pode especificar uma propriedade params nas opções do Axios usando este código:

estes dois exemplos enviam um parâmetro com o nome" date " e o valor" 15/05/2020 "no URL especificado.

Como fazer uma solicitação POST usando Axios

A sintaxe para fazer uma solicitação POST é a mesma de uma solicitação GET. A diferença é que você deve usar o código <> axios.post ( ) em vez de axios.get ().

Suponha que você queira enviar uma solicitação para uma API de publicação. Você pode fazer isso usando o seguinte código:

p>

Você pode especificar cabeçalhos e parâmetros da mesma forma que faz uma solicitação GET. Digamos que você queira enviar o cabeçalho "Nome" com o valor "James" com yo sua solicitação POST. você pode fazer isso usando este código:.

Axios post ("https://urlhere.com", { heads: {"Name": "James "}}) 

Conclusão

A biblioteca Axios é usada para fazer solicitações da web em JavaScript. Ele pode ser usado tanto no front-end usando JavaScript quanto no back-end usando uma plataforma como Node.js. Ao contrário de outras bibliotecas de consulta da Web, o Axios possui proteção CSRF integrada, suporta navegadores mais antigos e usa uma estrutura de promessa. É perfeito para fazer solicitações da Web.

Agora você está pronto para começar a fazer solicitações GET e POST usando o Axios como um desenvolvedor web profissional.