Javascript make http request

Javascript make http request

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

XMLHttpRequest

XMLHttpRequest — это собственный API в Javascript, который инкапсулирует логику отправки HTTP-запросов без необходимости обновления загруженной веб-страницы (Ajax другими словами). Данные можно отправлять с помощью метода POST и получать с помощью метода GET.

Для начала рассмотрим метод GET, а данные возьмем из https://jsonplaceholder.typicode.com/users — бесплатного API для разработчиков.

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

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

const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/users'; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => < console.log(Http.responseText); // =>получим массив данных в формате JSON >

Индикатором успешного запроса будет статус со значением 200. Значение статуса любого запроса мы можем увидеть во вкладке Network инструментов разработчика браузера. Однако также можно добавить проверку на статус, чтобы точно понимать, что запрос выполнился.

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

const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/users'; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => < if (this.readyState == 4 && this.status == 200) < console.log(Http.responseText); >>

Если readyState равно 4, это означает, что запрос выполнен. Подробней про значения здесь.

Рассмотрим теперь запрос POST, служащий для добавления изменений в данные на сервере. Для этого необходимо дополнительно указать данные, которые необходимо отправить и добавить новый метод setRequestHeader :

const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/users'; Http.open("POST", url); Http.setRequestHeader("Content-Type", "application/json"); Http.send(JSON.stringify(user));

Ниже добавим другие обработчики событий для отслеживания хода выполнения запроса:

// ход загрузки данных Http.upload.onprogress = function(e) < console.log(e.loaded); // загруженные данные console.log(e.total); // всего данных >// окончание загрузки данных Http.upload.onload = function(e) < console.log("Данные загружены"); >// полная отправка запроса Http.onload = function() < console.log(Http.status); >// ошибка при отправке запроса Http.onerror = function()

Методы jQuery

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

$.get

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

const url='https://jsonplaceholder.typicode.com/users'; $.get(url, function (data, status) < console.log(data); >);

$.post

Метод для POST-запросов, принимает три параметра: эндпоинт, данные для отправки и функцию обратного вызова.

const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; $.post(url, user, function (data, status) < console.log(data); >);

$.getJSON

Метод извлекает только данные в формате JSON. Принимает два параметра: эндпоинт и функцию обратного вызова.

const url='https://jsonplaceholder.typicode.com/users'; $.getJSON(url, function (data, status) < console.log(data); >);

$.ajax

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

const url='https://jsonplaceholder.typicode.com/users'; $.ajax(< url: url, type: "GET", success: function (result) < console.log(result); >, error: function (error) < console.log(error); >>);

С помощью метода $.ajax можно выполнять и остальные запросы, главное — не забывать их указывать в поле type и добавлять дополнительные поля ( data , dataType ).

Fetch

Fetch — это новый мощный веб-API, который позволяет выполнять асинхронные запросы. Он возвращает промис, который появился в стандарте ES6, что позволяет более разумно обрабатывать асинхронный запрос. Пример простой работы Fetch:

const url='https://jsonplaceholder.typicode.com/users'; fetch(url) .then(data => data.json()) .then(response => console.log(response));

Fetch принимает обязательный параметр — эндпоинт. Однако туда также можно передать и другие параметры:

const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; const otherParam = < headers: < "content-type": "application/json; charset=UTF-8", >, body: JSON.stringify(user), method: "POST", >; fetch(url, otherParam) .then(data => data.json()) .then(response => console.log(response)) .catch(error => console.log(error));

Как видим, Fetch значительно снижает сложность и многословность кода за счет использования более простого синтаксиса и промисов.

Axios

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

Чтобы интегрировать библиотеку Axios к себе в проект, мы можем либо установить ее через менеджер пакетов (npm, yarn) и потом сделать импорт, либо, как и в случае с jQuery, просто подключить в коде HTML:

При выполнении GET-запросов с помощью Axios мы можем использовать специальный метод axios.get() .

const url='https://jsonplaceholder.typicode.com/users'; axios.get(url) .then(response => console.log(response.data)) .catch(error => console.log(error))

Для POST-запроса используем другой метод:

const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; axios.post(url, user) .then(response => console.log(response.data)) .catch(error => console.log(error));

Axios сокращает объем работы, которую мы должны выполнять с нашей стороны, чтобы выполнять HTTP-запросы, даже по сравнению с Fetch. Как и Fetch, Axios перехватывает ошибки HTTP в своем методе catch, устраняя необходимость специальной проверки перед обработкой ответа.

Поскольку Axios возвращает промис, можно выполнять одновременно несколько запросов:

function getUser() < const url='https://jsonplaceholder.typicode.com/users'; return axios.get(url); >function getPost() < const url='https://jsonplaceholder.typicode.com/posts'; return axios.get(url); >axios.all([getUser(), getPost()]) .then(([users, posts]) => < console.log(users.data); console.log(posts.data); >) .catch(error => console.log(error))

SuperAgent

SuperAgent — один из первых сторонних пакетов, представленных в JavaScript для выполнения HTTP-запросов. Подобно Axios, он использует XMLHttpRequest API в своей реализации и поставляется с полным набором функций, полезных в ряде задач обработки запросов.

Подключается пакет либо через менеджер, либо в HTML:

При отправке HTTP-запросов с помощью SuperAgent мы можем полагаться на его специальные методы для инициирования запроса определенного типа. Например, мы можем использовать метод superagent.get() для отправки GET-запросов:

const url='https://jsonplaceholder.typicode.com/users'; superagent.get(url) .then(response => console.log(response.body)) .catch(error => console.log(error))

const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; superagent.post(url) .send(user) .then(response => console.log(response.body)) .catch(error => console.log(error))

Ky

Ky — это относительно новый пакет Javascript, который можно использовать для выполнения асинхронных HTTP-запросов. Он построен на основе Fetch API, но с более простым синтаксисом и дополнительными функциями.

Пример использования для GET-запроса:

const url='https://jsonplaceholder.typicode.com/users'; async function getData () < try < const data = await ky.get(url).json(); console.log(data); >catch (error) < console.log(error) >>

Пример использования для POST-запроса:

const url='https://jsonplaceholder.typicode.com/users'; const user = < "name": "Ivan Ivanov", "username": "ivan2002", "email": "ivan2002@mail.com", >; async function postData () < try < const response = await ky.post(url, ); console.log(response); > catch (error) < console.log(error) >>

Источник

JavaScript Get Request – How to Make an HTTP Request in JS

Joel Olawanle

When building applications, you will have to interact between the backend and frontend to get, store, and manipulate data.

This interaction between your frontend application and the backend server is possible through HTTP requests.

There are five popular HTTP methods you can use to make requests and interact with your servers. One HTTP method is the GET method, which can retrieve data from your server.

This article will teach you how to request data from your servers by making a GET request. You will learn the popular methods that exist currently and some other alternative methods.

For this guide, we’ll retrieve posts from the free JSON Placeholder posts API.

There are two popular methods you can easily use to make HTTP requests in JavaScript. These are the Fetch API and Axios.

How to Make a GET Request with the Fetch API

The Fetch API is a built-in JavaScript method for retrieving resources and interacting with your backend server or an API endpoint. Fetch API is built-in and does not require installation into your project.

Fetch API accepts one mandatory argument: the API endpoint/URL. This method also accepts an option argument, which is an optional object when making a GET request because it is the default request.

Let’s create a GET request to get a post from the JSON Placeholder posts API.

fetch("https://jsonplaceholder.typicode.com/posts/1") .then((response) => response.json()) .then((json) => console.log(json)); 

This will return a single post which you can now store in a variable and use within your project.

Note: For other methods, such as POST and DELETE, you need to attach the method to the options array.

How to Make a GET Request with Axios

Axios is an HTTP client library. This library is based on promises that simplify sending asynchronous HTTP requests to REST endpoints. We will send a GET request to the JSONPlaceholder Posts API endpoint.

Axios, unlike the Fetch API, is not built-in. This means you need to install Axios into your JavaScript project.

To install a dependency into your JavaScript project, you will first initialize a new npm project by running the following command in your terminal:

And now you can install Axios to your project by running the following command:

Once Axios is successfully installed, you can create your GET request. This is quite similar to the Fetch API request. You will pass the API endpoint/URL to the get() method, which will return a promise. You can then handle the promise with the .then() and .catch() methods.

axios.get("https://jsonplaceholder.typicode.com/posts/1") .then((response) => console.log(response.data)) .catch((error) => console.log(error)); 

Note: The major difference is that, for Fetch API, you first convert the data to JSON, while Axios returns your data directly as JSON data.

At this point, you have learned how to make a GET HTTP request with Fetch API and Axios. But there are some other methods that still exist. Some of these methods are XMLHttpRequest and jQuery.

How to Make a GET Request with XMLHttpRequest

You can use the XMLHttpRequest object to interact with servers. This method can request data from a web server’s API endpoint/URL without doing a full page refresh.

Note: All modern browsers have a built-in XMLHttpRequest object to request data from a server.

Let’s perform the same request with the XMLHttpRequest by creating a new XMLHttpRequest object. You will then open a connection by specifying the request type and endpoint (the URL of the server), then you’ll send the request, and finally listen to the server’s response.

const xhr = new XMLHttpRequest(); xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1"); xhr.send(); xhr.responseType = "json"; xhr.onload = () => < if (xhr.readyState == 4 && xhr.status == 200) < console.log(xhr.response); >else < console.log(`Error: $`); > >; 

In the above code, a new XMLHttpRequest object is created and stored in a variable called xhr . You can now access all its objects using the variable, such as the .open() method, when you specify the request type (GET) and the endpoint/URL where you want to request data.

Another method you will use is .send() , which sends the request to the server. You can also specify the format in which the data will be returned using the responseType method. At this point, the GET request is sent, and all you have to do is listen to its response using the onload event listener.

If the client’s state is done (4), and the status code is successful (200), then the data will be logged to the console. Otherwise, an error message showing the error status will appear.

How to Make a GET Request with jQuery

Making HTTP requests in jQuery is relatively straightforward and similar to the Fetch API and Axios. To make a GET request, you will first install jQuery or make use of its CDN in your project:

With jQuery, you can access the GET method $.get() , which takes in two parameters, the API endpoint/URL and a callback function that runs when the request is successful.

$.get("https://jsonplaceholder.typicode.com/posts/1", (data, status) => < console.log(data); >); 

Note: In the callback function, you have access to the request’s data and the request’s status.

You can also use the jQuery AJAX Method, which is quite different and can be used to make asynchronous requests:

Wrapping Up

In this article, you have learned how to make the HTTP GET request in JavaScript. You might now begin to think — which method should I use?

If it’s a new project, you can choose between the Fetch API and Axios. Also, if you want to consume basic APIs for a small project, there is no need to use Axios, which demands installing a library.

Источник