Вот самые популярные способы сделать HTTP-запрос в JavaScript.

В JavaScript есть отличные модули и методы для выполнения HTTP-запросов, которые можно использовать для отправки или получения данных от ресурса на стороне сервера. В этой статье мы рассмотрим несколько популярных способов выполнения HTTP-запросов в JavaScript.

Аякс

Ajax - это традиционный способ выполнения асинхронного HTTP-запроса. Данные можно отправлять с помощью метода HTTP POST и получать с помощью метода HTTP GET. Давайте посмотрим и сделаем GETзапрос. Я буду использовать JSONPlaceholder, бесплатный онлайн-API REST для разработчиков, который возвращает случайные данные в формате JSON.

Чтобы выполнить HTTP-вызов в Ajax, вам необходимо инициализировать новый XMLHttpRequest()метод, указать конечную точку URL и HTTP-метод (в данном случае GET). Наконец, мы используем open()метод, чтобы связать метод HTTP и конечную точку URL-адреса вместе и вызвать send()метод, чтобы запустить запрос.

Мы регистрируем HTTP-ответ в консоли, используя XMLHTTPRequest.onreadystatechangeсвойство, которое содержит обработчик события, который будет вызываться при readystatechangedсрабатывании события.

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

Если вы просмотрите консоль браузера, она вернет массив данных в формате JSON. Но как мы узнаем, выполнен ли запрос? Другими словами, как мы можем обрабатывать ответы с помощью Ajax?

onreadystatechangeСвойство имеет два метода, readyStateи statusкоторые позволяют проверить состояние нашего запроса.

Если readyStateравно 4, значит, запрос выполнен. readyStateСвойство имеет 5 ответов. Узнай больше об этом здесь.

Помимо прямого вызова Ajax с помощью JavaScript, существуют и другие более мощные методы выполнения HTTP-вызова, например, $.Ajaxметод jQuery. Я сейчас это обсудю.

методы jQuery

В jQuery есть много методов для простой обработки HTTP-запросов. Чтобы использовать эти методы, вам необходимо включить в свой проект библиотеку jQuery.

$ .ajax

jQuery Ajax - один из самых простых методов выполнения HTTP-вызова.

Метод $ .ajax принимает множество параметров, некоторые из которых являются обязательными, а другие - необязательными. Он содержит два варианта обратного вызова successи errorдля обработки полученного ответа.

$ .get метод

Метод $ .get используется для выполнения запросов GET. Он принимает два параметра: конечную точку и функцию обратного вызова.

$ .post

Это $.postеще один способ отправки данных на сервер. Он принимает три параметра: urlданные, которые вы хотите опубликовать, и функцию обратного вызова.

$ .getJSON

$.getJSONМетод только извлекает данные , которые в формате JSON. Он принимает два параметра: urlфункцию обратного вызова и функцию обратного вызова.

В jQuery есть все эти методы для запроса или отправки данных на удаленный сервер. Но на самом деле вы можете объединить все эти методы в один: $.ajaxметод, как показано в примере ниже:

принести

fetch- это новый мощный веб-API, который позволяет выполнять асинхронные запросы. Фактически, fetchэто один из лучших и моих любимых способов сделать HTTP-запрос. Он возвращает «обещание», которое является одной из замечательных особенностей ES6.Если вы не знакомы с ES6, вы можете прочитать об этом в этой статье. Обещания позволяют нам обрабатывать асинхронный запрос более разумным способом. Давайте посмотрим, как это fetchработает технически.

fetchФункция принимает один обязательный параметр: в endpointURL. У него также есть другие необязательные параметры, как в примере ниже:

Как видите, fetchимеет много преимуществ для выполнения HTTP-запросов. Вы можете узнать об этом подробнее здесь. Кроме того, в fetch есть другие модули и плагины, которые позволяют нам отправлять и получать запросы к и со стороны сервера, например axios.

Axios

Axios - это библиотека с открытым исходным кодом для выполнения HTTP-запросов, которая предоставляет множество замечательных функций. Давайте посмотрим, как это работает.

Применение:

Во-первых, вам нужно включить Axios. Есть два способа включить Axios в ваш проект.

Во-первых, вы можете использовать npm:

npm install axios --save

Тогда вам нужно будет импортировать его

import axios from 'axios'

Во-вторых, вы можете включать аксиомы с помощью CDN.

Делаем запрос с помощью axios:

С Axios вы можете использовать GETи POSTдля получения и отправки данных с сервера.

ПОЛУЧИТЬ:

axiosпринимает один обязательный параметр и может также принимать второй необязательный параметр. Это берет некоторые данные в виде простого запроса.

ПОЧТА:

Axios возвращает «обещание». Если вы знакомы с обещаниями, вы, вероятно, знаете, что обещание может выполнять несколько запросов. Вы можете сделать то же самое с axios и запускать несколько запросов одновременно.

Axios поддерживает множество других методов и опций. Вы можете изучить их здесь.

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:

You can check out the demo example on Stackblitz.

Wrapping Up

We’ve just covered the most popular ways to make an HTTP call request in JavaScript.

Thank you for your time. If you like it, clap up to 50, click follow, and reach out to me on Twitter.

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — [email protected].