Ето най-популярните начини да направите HTTP заявка в JavaScript

JavaScript разполага със страхотни модули и методи за извършване на HTTP заявки, които могат да се използват за изпращане или получаване на данни от сървърния ресурс. В тази статия ще разгледаме няколко популярни начина за извършване на HTTP заявки в JavaScript.

Аякс

Ajax е традиционният начин да се направи асинхронна HTTP заявка. Данните могат да се изпращат по метода HTTP POST и да се получават по метода HTTP GET. Нека да разгледаме и да направим GETзаявка. Ще използвам JSONPlaceholder, безплатен онлайн REST API за разработчици, който връща произволни данни във формат 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 заявки. Можете да научите повече за това тук. Освен това, в рамките на извличането има и други модули и плъгини, които ни позволяват да изпращаме и получаваме заявка до и от страна на сървъра, като axios.

Аксиос

Axios е библиотека с отворен код за отправяне на HTTP заявки и предлага много страхотни функции. Нека да разгледаме как работи.

Употреба:

Първо, ще трябва да включите Axios. Има два начина да включите Axios във вашия проект.

Първо, можете да използвате npm:

npm install axios --save

След това ще трябва да го импортирате

import axios from 'axios'

Второ, можете да включите 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].