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

JavaScript tem ótimos 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 maneiras populares de fazer solicitações HTTP em JavaScript.

Ajax

Ajax é a maneira tradicional de fazer uma solicitação HTTP assíncrona. Os dados podem ser enviados usando o método HTTP POST e recebidos usando o método HTTP GET. Vamos dar uma olhada e fazer um GETpedido. Usarei JSONPlaceholder, uma API REST online gratuita para desenvolvedores que retorna dados aleatórios no formato JSON.

Para fazer uma chamada HTTP no Ajax, você precisa inicializar um novo XMLHttpRequest()método, especificar o ponto de extremidade da URL e o método HTTP (neste caso GET). Por fim, usamos o open()método para ligar o método HTTP e o endpoint da URL e chamar o send()método para disparar a solicitação.

Registramos a resposta HTTP no console usando a XMLHTTPRequest.onreadystatechangepropriedade que contém o manipulador de eventos a ser chamado quando o readystatechangedevento é disparado.

const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }

Se você visualizar o console do navegador, ele retornará uma matriz de dados no formato JSON. Mas como saberemos se o pedido foi feito? Em outras palavras, como podemos lidar com as respostas com Ajax?

A onreadystatechangepropriedade tem dois métodos, readyStatee statusque nos permite verificar o estado do nosso pedido.

Se readyStatefor igual a 4, significa que a solicitação foi concluída. A readyStatepropriedade possui 5 respostas. Saiba mais sobre isso aqui.

Além de fazer uma chamada Ajax diretamente com JavaScript, existem outros métodos mais poderosos de fazer uma chamada HTTP, como o $.Ajaxmétodo jQuery. Vou discutir isso agora.

métodos jQuery

jQuery tem muitos métodos para lidar facilmente com solicitações HTTP. Para usar esses métodos, você precisará incluir a biblioteca jQuery em seu projeto.

$ .ajax

jQuery Ajax é um dos métodos mais simples de fazer uma chamada HTTP.

O método $ .ajax aceita muitos parâmetros, alguns dos quais são obrigatórios e outros opcionais. Ele contém duas opções de retorno de chamada successe errorpara lidar com a resposta recebida.

método $ .get

O método $ .get é usado para executar solicitações GET. Leva dois parâmetros: o endpoint e uma função de retorno de chamada.

$ .post

O $.postmétodo é outra maneira de postar dados no servidor. Leva três parâmetros: o url, os dados que você deseja postar e uma função de retorno de chamada.

$ .getJSON

O $.getJSONmétodo recupera apenas dados que estão no formato JSON. Leva dois parâmetros: urloe uma função de retorno de chamada.

jQuery tem todos esses métodos para solicitar ou postar dados em um servidor remoto. Mas você pode realmente colocar todos esses métodos em um: o $.ajaxmétodo, conforme visto no exemplo abaixo:

buscar

fetché uma nova API da web poderosa que permite fazer solicitações assíncronas. Na verdade, fetché uma das melhores e minha forma favorita de fazer uma solicitação HTTP. Ele retorna uma “promessa” que é uma das grandes características do ES6.Se você não estiver familiarizado com o ES6, poderá ler sobre ele neste artigo. As promessas nos permitem lidar com a solicitação assíncrona de uma maneira mais inteligente. Vamos dar uma olhada em como fetchfunciona tecnicamente.

A fetchfunção leva um parâmetro obrigatório: o endpointURL. Ele também possui outros parâmetros opcionais como no exemplo abaixo:

Como você pode ver, fetchtem muitas vantagens para fazer solicitações HTTP. Você pode aprender mais sobre isso aqui. Além disso, dentro do fetch existem outros módulos e plug-ins que nos permitem enviar e receber uma solicitação de e para o servidor, como axios.

Axios

Axios é uma biblioteca de código aberto para fazer solicitações HTTP e oferece muitos recursos excelentes. Vamos dar uma olhada em como funciona.

Uso:

Primeiro, você precisa incluir Axios. Existem duas maneiras de incluir Axios em seu projeto.

Primeiro, você pode usar o npm:

npm install axios --save

Então você precisa importá-lo

import axios from 'axios'

Em segundo lugar, você pode incluir axios usando um CDN.

Fazendo uma solicitação com axios:

Com Axios você pode usar GETe POSTpara recuperar e postar dados do servidor.

PEGUE:

axiosaceita um parâmetro obrigatório e também pode receber um segundo parâmetro opcional. Isso leva alguns dados como uma consulta simples.

POSTAR:

Axios retorna uma “promessa”. Se você está familiarizado com promessas, provavelmente sabe que uma promessa pode executar várias solicitações. Você pode fazer a mesma coisa com axios e executar várias solicitações ao mesmo tempo.

Axios oferece suporte a muitos outros métodos e opções. Você pode explorá-los aqui.

Angular HttpClient

Angular has its own HTTP module that works with Angular apps. It uses the RxJS library to handle asynchronous requests and provides many options to perform the HTTP requests.

Making a call to the server using the Angular HttpClient

To make a request using the Angular HttpClient, we have to run our code inside an Angular app. So I created one. If you’re not familiar with Angular, check out my article, learn how to create your first Angular app in 20 minutes.

The first thing we need to do is to import HttpClientModule in app.module.ts

Then, we have to create a service to handle the requests. You can easily generate a service using Angular CLI.

ng g service FetchdataService

Then, we need to import HttpClient in fetchdataService.ts service and inject it inside the constructor.

And in app.component.ts import fetchdataService

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

Finally, call the service and run it.

app.component.ts:

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

Empacotando

Acabamos de cobrir as maneiras mais populares de fazer uma solicitação de chamada HTTP em JavaScript.

Obrigado pelo seu tempo. Se você gostar, bata palmas para 50, clique em seguir e entre em contato comigo no Twitter.

A propósito, recentemente trabalhei com um grande grupo de engenheiros de software em um de meus aplicativos móveis. A organização foi ótima, e o produto foi entregue muito rapidamente, muito mais rápido do que outras empresas e freelancers com quem trabalhei, e acho que posso recomendá-los honestamente para outros projetos por aí. Envie-me um e-mail se quiser entrar em contato - [email protected] .