Aqui Estão As Formas Mais Populares de Fazer Uma Solicitação HTTP em JavaScript

03/08/2022 14:46 Aqui estão as formas mais populares de fazer uma solicitação HTTP em JavaScript
Artigo original escrito por Said Hayani

Artigo original: Here are the most popular ways to make an HTTP request in JavaScript
Traduzido e adaptado por Daniel Rosa
O JavaScript tem grandes módulos e métodos para fazer solicitações HTTP, que podem ser usadas para enviar ou receber
dados de um recurso do lado do servidor. Neste artigo, veremos algumas das maneiras mais populares de fazer solicitações
HTTP em JavaScript.
Ajax
Ajax é a maneira tradicional de se fazer uma solicitação de HTTP assíncrona. Os dados podem ser enviados usando o
método POST de HTTP e recebidos usando o método GET. Vamos ver isso e realizar uma solicitação GET . Usaremos a
JSONPlaceholder, uma API REST on-line e gratuita para desenvolvedores que retorna dados aleatórios em formato JSON.
Para fazer uma chamada de HTTP em Ajax, você precisa inicializar um novo método XMLHttpRequest() , especificar o URL de
endpoint e o método HTTP (neste caso, o GET). Por fim, usaremos o método open() para unir o método HTTP e o endpoint
do URL e chamar o método send() para disparar a solicitação.
Registramos a resposta de HTTP no console usando a propriedade XMLHTTPRequest.onreadystatechange , que contém o

manipulador de eventos a ser chamado quando o evento readystatechanged é disparado.
file:///G:/Nova pasta/Nova pasta (3)/Aqui estão as formas mais populares de fazer uma solicitação HTTP em JavaScript.html 1/20
const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
console.log(Http.responseText)
}
Se você olhar para o console do navegador, ele retornará um array de dados em formato JSON. Mas como saberemos se a
solicitação está feita? Em outras palavras, como manipularemos as respostas com o Ajax?
A propriedade onreadystatechange tem dois métodos, readyState e status , que nos permitem verificar o estado de nossa
solicitação.
Se readyState for igual a 4, isso significa que a solicitação foi feita. A propriedade readyState tem 5 respostas. Aprenda
sobre essa propriedade aqui.
Além de fazer uma chamada de Ajax diretamente com JavaScript, há outros métodos mais poderosos de se fazer uma
chamada de HTTP, como o $.Ajax , que é um método do jQuery. Discutiremos esse método agora.
Métodos do jQuery
O jQuery tem muitos métodos para tratar de solicitações HTTP com facilidade. Para usar esses métodos, é preciso incluir a
biblioteca do jQuery em seu projeto.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$.ajax
O método ajax do jQuery é um dos mais simples de se fazer uma chamada de HTTP.
O método $.ajax tem muitos parâmetros. Alguns deles são obrigatórios e alguns são opcionais. Ele tem duas opções de
callback, success e error , para tratar da resposta recebida.
Método $.get
O método $.get é usado para fazer solicitações GET. Ele recebe dois parâmetros: o endpoint e uma função de callback.
$.post
O método $.post é outra forma de publicar dados no servidor. Ele recebe três parâmetros: o url , os dados a serem
publicados e uma função de callback.
$.getJSON
O método $.getJSON apenas obtém dados que estão no formato JSON. Ele recebe dois parâmetros: o url e uma função de
callback.
O jQuery tem todos esses métodos para solicitar dados de um servidor remoto ou de publicar dados nele. É possível, no
entanto, colocar todos esses métodos em um só: o método $.ajax , como vemos no exemplo abaixo:
fetch
O fetch é uma nova API web poderosa que permite fazer solicitações assíncronas. De fato, o fetch é a melhor e minha
forma favorita de fazer solicitações HTTP. Ele retorna uma “Promise”, que é um dos grandes recursos do ES6. Se você não
está familiarizado com o ES6, pode ler sobre ele nesse artigo (em inglês). As promises permitem tratar de uma solicitação
assíncrona de modo mais inteligente. Vamos ver como funciona o fetch tecnicamente.
A função fetch recebe um parâmetro obrigatório: o URL do endpoint . Ele também tem parâmetros opcionais como no
exemplo abaixo:
Como você pode ver, o fetch tem muitas vantagens na hora de se fazer uma solicitação HTTP. Saiba mais sobre ele
lendo aqui (em inglês). Além disso, juntamente ao fetch, há outros módulos e plug-ins que nos permitem enviar e receber
uma solicitação, de e para o servidor, como o axios.
Axios
O Axios é uma biblioteca de código aberto para fazer solicitações HTTP e tem muitos recursos interessantes. Vamos ver
como ele funciona.
Uso:
Primeiro, você precisa incluir o Axios. Há duas maneiras de incluir o Axios em seu projeto.
Primeiro, você pode usar o npm:
npm install axios --save
Depois, você precisa importá-lo
import axios from 'axios'
A segunda possibilidade é incluir o axios usando um CDN.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Como fazer uma solicitação com o axios:

Com o Axios, você pode usar GET e POST para obter dados do servidor e para publicar dados nele.
GET:
O axios recebe um parâmetro obrigatório, podendo receber também um segundo parâmetro opcional. Ele recebe os dados
como uma consulta simples.
POST:
O Axios retorna uma “Promise.” Se está familiarizado com promises, você sabe que uma promise pode executar diversas
solicitações. Você pode fazer o mesmo com o axios e executar várias solicitações ao mesmo tempo.
O Axios também dá suporte a outros métodos e opções. Você pode consultar sobre eles aqui (em inglês).
HttpClient do Angular
O Angular tem seu próprio módulo de HTTP, que funciona com as aplicações em Angular. Ele usa a biblioteca RxJS para
tratar de solicitações assíncronas e fornece muitas opções de realizar as solicitações HTTP.
Como fazer uma chamada ao servidor usando o HttpClient do Angular

Para fazer uma solicitação usando o HttpClient do Angular, temos que executar nosso código em uma aplicação do Angular.
Por isso, eu criei uma. Se você não estiver familiarizado com o Angular, dê uma olhada no meu artigo e saiba como criar sua
primeira aplicação do Angular em 20 minutos (em inglês).
A primeira coisa que precisamos fazer é importar o HttpClientModule em app.module.ts
Em seguida, temos de criar um serviço para tratar das solicitações. Você pode gerar um serviço facilmente com a CLI do
Angular.
ng g service FetchdataService
Em seguida, precisamos importar o HttpClient no serviço fetchdataService.ts e injetá-lo dentro do construtor.
E, no app.component.ts , importar o fetchdataService
//importação
import { FetchdataService } from './fetchdata.service';
Por fim, chamamos o serviço e o executamos.
app.component.ts:
Você pode ver o exemplo de demonstração no Stackblitz.
Para fechar
Acabamos de ver as maneiras mais populares de se fazer uma solicitação de chamada de HTTP em JavaScript.
Obrigado por sua leitura. Se quiser, bata palmas 50 vezes, clique em Seguir o autor ou entre em contato com ele pelo Twitter.
A propósito, o autor trabalho há pouco tempo com um grupo bastante forte de engenheiros de software na criação de um de
seus aplicativos para dispositivos móveis. A organização foi ótima e o produto foi entregue rapidamente, muito mais rápido do
que com outras empresas e freelancers com os quais o autor trabalhou anteriormente. Ele acredita poder recomendá-los
para outros projetos de modo honesto. Assim, ele pede que seja enviado para ele um e-mail caso seja sua vontade entrar em
contato com ele — said@devsdata.com.

Aqui Estão As Formas Mais Populares de Fazer Uma Solicitação HTTP em JavaScript

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aqui Estão As Formas Mais Populares de Fazer Uma Solicitação HTTP em JavaScript

Enviado por

Direitos autorais:

Formatos disponíveis

03/08/2022 14:46 Aqui estão as formas mais populares de fazer uma solicitação HTTP em JavaScript

Artigo original escrito por Said Hayani

Registramos a resposta de HTTP no console usando a propriedade XMLHTTPRequest.onreadystatechange , que contém o

const Http = new XMLHttpRequest();

Http.onreadystatechange = (e) => {

Primeiro, você pode usar o npm:

npm install axios --save

Depois, você precisa importá-lo

import axios from 'axios'

A segunda possibilidade é incluir o axios usando um CDN.

Como fazer uma solicitação com o axios:

Como fazer uma chamada ao servidor usando o HttpClient do Angular

A primeira coisa que precisamos fazer é importar o HttpClientModule em app.module.ts

Em seguida, precisamos importar o HttpClient no serviço fetchdataService.ts e injetá-lo dentro do construtor.

E, no app.component.ts , importar o fetchdataService

import { FetchdataService } from './fetchdata.service';

Por fim, chamamos o serviço e o executamos.

Você pode ver o exemplo de demonstração no Stackblitz.

Você também pode gostar