Содержание статьи
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="
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
console.log(Http.responseText)
}Если вы просматриваете консоль браузера, она вернет массив данных в формате JSON. Но как мы узнаем, выполнен ли запрос? Другими словами, как мы можем обрабатывать ответы с помощью Ajax?
The onreadystatechange свойство имеет два метода, readyState и status которые позволяют нам проверить состояние нашего запроса.
Если 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-вызова.
Метод $.ajax принимает множество параметров, некоторые из которых являются обязательными, а другие – необязательными. Он содержит два варианта обратного звонка. success и error для обработки полученного ответа
метод $.get
Метод $.get используется для выполнения запросов GET. Он принимает два параметра: конечную точку и функцию обратного вызова.
$.post
The $.post метод является еще одним способом отправки данных на сервер. Для этого требуются три параметра: urlданные, которые необходимо опубликовать, и функцию обратного вызова.
$.getJSON
The $.getJSON метод получает только данные в формате JSON. Для этого требуются два параметра: url и функция обратного вызова
jQuery имеет все эти методы для запроса или размещения данных на удаленном сервере. Но на самом деле вы можете объединить все эти методы в один: $.ajax метод, как показано на примере ниже:
получить
fetch это новый мощный веб-API, позволяющий делать асинхронные запросы. На самом деле, fetch это один из самых лучших и моих любимых способов сделать HTTP-запрос. Он возвращает Promise, что является одной из замечательных функций ES6. Если вы не знакомы с ES6, вы можете прочесть о нем в этой статье. Обещания позволяют нам обрабатывать асинхронный запрос более разумным образом. Давайте посмотрим, как fetch технически работает.
The fetch функция принимает один необходимый параметр: the endpoint URL. Он также имеет другие дополнительные параметры, как в примере ниже:
Как вы можете видеть, 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 для получения и размещения данных с сервера.
ПОЛУЧИТЬ:
axios принимает один необходимый параметр и может принимать второй необязательный параметр. Это принимает некоторые данные в качестве простого запроса.
ПУБЛИКАЦИЯ:
Axios возвращает «Promise». Если вы знакомы с обещаниями, вы наверняка знаете, что обещание может выполнять несколько запросов. Вы можете сделать то же с axios и одновременно выполнять несколько запросов.
Axios поддерживает многие другие методы и опции. Вы можете изучить их здесь.
Угловой HttpClient
Angular имеет свой модуль HTTP, который работает с приложениями Angular. Он использует библиотеку RxJS для обработки асинхронных запросов и дает множество опций для выполнения запросов HTTP.
Вызов на сервер с помощью Angular HttpClient
Чтобы запросить Angular HttpClient, мы должны запустить наш код внутри программы Angular. Потому я создал один. Если вы не знакомы с Angular, посмотрите мою статью, узнайте, как создать свою первую программу Angular за 20 минут.
Первое, что нам нужно сделать, это импортировать HttpClientModule в app.module.ts
Затем мы должны создать службу для обработки запросов. Вы можете легко создать сервис с помощью Angular CLI.
ng g service FetchdataServiceЗатем нам нужно импортировать HttpClient fetchdataService.ts сервис и вставьте его внутрь конструктора.
И в app.component.ts импорт fetchdataService
//import
import { FetchdataService } from './fetchdata.service';Наконец, позвоните в службу и запустите ее.
app.component.ts:
Вы можете просмотреть демонстрационный пример Stackblitz.
Подведению
Мы только что рассмотрели самые популярные способы запроса вызова HTTP в JavaScript.
Спасибо за ваше время. Если вам это нравится, щелкните 50, нажмите «Подписаться» и свяжитесь со мной в Twitter.
Кстати, недавно я работал с сильной группой инженеров-программистов над одним из моих мобильных приложений. Организация была превосходной, и продукт был доставлен очень быстро, гораздо быстрее, чем другие фирмы и фрилансеры, с которыми я работал, и я думаю, что я могу честно рекомендовать их для других проектов. Отправьте мне электронное письмо, если хотите связаться. said@devsdata.com.