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

1656623175 vot samye populyarnye sposoby sdelat http zapros v 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 событие уволено.

1*zXtlRe4yRF3tZkFFvBhZeA
const Http = new XMLHttpRequest();
const url="
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

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

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

1*UfZf6qaZwNh5Mptft4WIZA

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

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

Методы jQuery

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$.ajax

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

1*vZ4BqVQfsvtpJm_RCsCE2Q

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

метод $.get

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

1*2koN5FJuT68WIyRKTihe5w

$.post

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

1*ql6Yp1EJfD7850GXhErwyw

$.getJSON

The $.getJSON метод получает только данные в формате JSON. Для этого требуются два параметра: url и функция обратного вызова

1*hdcFdVHiBiRAo1YOi_Kt0Q

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

1*soPARjfQXMcZ5ccPK1QMmA

получить

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

1*kz6k4VRs0RiVCasWR0pCow

The fetch функция принимает один необходимый параметр: the endpoint URL. Он также имеет другие дополнительные параметры, как в примере ниже:

1*QasrBgYZcU4BBFHqD2bBdg

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

Axios

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

Использование:

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

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

npm install axios --save

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

import axios from 'axios'

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

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Создание запроса с помощью axios:

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

ПОЛУЧИТЬ:

1*4wmqiPsSN5mdgjJiRaKVZg

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

ПУБЛИКАЦИЯ:

1*ey6-vwsrm9RAhyoU15u6xQ

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

1*40Pji4utVKPpC7-dePfC6Q

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

Угловой HttpClient

Angular имеет свой модуль HTTP, который работает с приложениями Angular. Он использует библиотеку RxJS для обработки асинхронных запросов и дает множество опций для выполнения запросов HTTP.

Вызов на сервер с помощью Angular HttpClient

Чтобы запросить Angular HttpClient, мы должны запустить наш код внутри программы Angular. Потому я создал один. Если вы не знакомы с Angular, посмотрите мою статью, узнайте, как создать свою первую программу Angular за 20 минут.

Первое, что нам нужно сделать, это импортировать HttpClientModule в app.module.ts

1*iFuW5Fbp91VR5gwQ6XNMEQ

Затем мы должны создать службу для обработки запросов. Вы можете легко создать сервис с помощью Angular CLI.

ng g service  FetchdataService

Затем нам нужно импортировать HttpClient fetchdataService.ts сервис и вставьте его внутрь конструктора.

1*kKwELAhSSpnN8DvIgdOfcQ

И в app.component.ts импорт fetchdataService

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

Наконец, позвоните в службу и запустите ее.

app.component.ts:

1*OrRe183Yaclt19n5ZQ194Q

Вы можете просмотреть демонстрационный пример Stackblitz.

Подведению

Мы только что рассмотрели самые популярные способы запроса вызова HTTP в JavaScript.

Спасибо за ваше время. Если вам это нравится, щелкните 50, нажмите «Подписаться» и свяжитесь со мной в Twitter.

Кстати, недавно я работал с сильной группой инженеров-программистов над одним из моих мобильных приложений. Организация была превосходной, и продукт был доставлен очень быстро, гораздо быстрее, чем другие фирмы и фрилансеры, с которыми я работал, и я думаю, что я могу честно рекомендовать их для других проектов. Отправьте мне электронное письмо, если хотите связаться. said@devsdata.com.

Добавить комментарий

Ваш адрес email не будет опубликован.