Aqui estão as formas mais populares de fazer uma solicitação HTTP em JavaScript

Artigo original: Here are the most popular ways to make an HTTP request in JavaScript

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.

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.