JavaScript имеет отличные модули и методы, чтобы сделать HTTP-запросы, которые можно использовать для отправки или получения данных с бокового ресурса сервера. В этой статье мы собираемся посмотреть на несколько популярных способов сделать HTTP-запросы в JavaScript.
Ajax.
Ajax – традиционный способ сделать асинхронный HTTP-запрос. Данные могут быть отправлены с использованием метода HTTP Post и полученные с помощью метода Get HTTP. Давайте посмотрим и сделать Получить запрос. Я буду пользоваться JSONDHOLDER, бесплатный онлайн-API отдыха для разработчиков, которые возвращает случайные данные в формате JSON.
Чтобы сделать HTTP Call в AJAX, вам нужно инициализировать новый Xmlhttprequest () Метод, укажите метод конечной точки URL и HTTP (в этом случае Get). Наконец, мы используем Открыть () Метод связать метод HTTP и конечную точку URL вместе и вызовите Отправить () Способ устрелить запрос.
Мы регистрируем HTTP-ответ на консоль, используя Xmlhttprequest.onweadystatechange Свойство, которое содержит обработчик событий, который будет называться, когда ReadyStateChangeded событие уволено.
const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
console.log(Http.responseText)
}Если вы просматриваете консоль браузера, он вернет массив данных в формате JSON. Но как бы мы узнали, сделан ли запрос? Другими словами, как мы можем справиться с ответами с AJAX?
onreadystatechange Имущество имеет два метода, ReadyState и Статус которые позволяют нам проверить состояние нашего запроса.
Если ReadyState равно 4, это означает, что запрос сделан. ReadyState Имущество имеет 5 ответов. Узнайте больше об этом здесь Отказ
Помимо непосредственного вызова AJAX Call с JavaScript, есть еще более мощные методы создания HTTP-вызова, такие как $ .Ajax. который является методом jQuery. Я буду обсуждать это сейчас.
Методы jQuery
jQuery имеет много методов для легко обрабатывания HTTP-запросов. Для использования этих методов вам необходимо включить библиотеку jQuery в вашем проекте.
$ .ajax.
jQuery ajax – один из самых простых методов, чтобы сделать HTTP Call.
Метод $ .ajax принимает много параметров, некоторые из которых требуются и другие необязательные. Содержит два варианта обратного вызова успех и Ошибка . обрабатывать полученный ответ.
метод $
Метод $ .get используется для выполнения запросов Get. Требуется два параметра: конечная точка и функция обратного вызова.
$ .post.
$ .post Метод – это другой способ публиковать данные на сервере. Три параметра принимают: URL данные, которые вы хотите опубликовать, и функция обратного вызова.
$ .getjson.
$ .getjson. Метод извлекает только данные, которые находятся в формате JSON. Требуется два параметра: URL и функция обратного вызова.
jQuery имеет все эти методы, чтобы запросить или опубликовать данные на удаленный сервер. Но вы действительно можете поставить все эти методы в одну: $ .ajax Метод, как видно в примере ниже:
принести
извлекать Является ли новая мощная веб-API, которая позволяет сделать асинхронные запросы. На самом деле, извлекать Один из лучших и моих любимых способов сделать HTTP-запрос. Это возвращает «обещание», которое является одной из великолепных особенностей ES6. Если вы не знакомы с ES6, вы можете прочитать об этом в Это статья. Обещания позволяют нам обращаться с асинхронным запросом более умным путем. Давайте посмотрим на то, как извлекать технически работает.
извлекать Функция принимает один обязательный параметр: конечная точка Ур Он также имеет другие необязательные параметры, как в примере ниже:
Как видите, извлекать имеет много преимуществ для создания HTTP-запросов. Вы можете узнать больше об этом здесь Отказ Кроме того, в пределах приема есть другие модули и плагины, которые позволяют нам отправлять и получать запрос на сторону сервера, например Axios Отказ
Axios.
AXIOS – это библиотека открытых исходников для создания HTTP-запросов и предоставляет множество отличных функций. Давайте посмотрим на то, как это работает.
Использование:
Во-первых, вам нужно будет включить Axios. Есть два способа включить Axios в вашем проекте.
Во-первых, вы можете использовать NPM:
npm install axios --save
Тогда вам нужно будет импортировать его
import axios from 'axios'
Во-вторых, вы можете включить Axios, используя CDN.
Создание запроса с Axios:
С Axios вы можете использовать Получить и Пост Чтобы получить и опубликовать данные с сервера.
ПОЛУЧАТЬ:
Axios принимает один требуемый параметр и может получить второй дополнительный параметр тоже. Это принимает некоторые данные как простой запрос.
ПОЧТА:
Axios Возвращает «обещание». Если вы знакомы с обещаниями, вы, вероятно, знаете, что обещание может выполнять несколько запросов. Вы можете сделать то же самое с Axios и запустить несколько запросов одновременно.
Axios поддерживает многие другие методы и варианты. Вы можете исследовать их здесь Отказ
Угловой httpclent.
Угловой имеет свой собственный HTTP-модуль, который работает с угловыми приложениями. Используется RXJS. Библиотека для обработки асинхронных запросов и предоставляет множество вариантов для выполнения HTTP-запросов.
Создание сервера, используя угловой httpclient
Чтобы сделать запрос, используя угловой HTTPClient, мы должны запустить наш код внутри углового приложения. Итак, я создал один. Если вы не знакомы с угловым, проверьте мою статью, Узнайте, как создать свое первое угловое приложение за 20 минут .
Первое, что нам нужно сделать, это импортировать HttpclientModule. в app.module.ts.
Затем мы должны создать сервис для обработки запросов. Вы можете легко генерировать сервис, используя Угловые CLI Отказ
ng g service FetchdataService
Затем нам нужно импортировать httpClient в fetchdataService.ts Сервис и ввести его внутри конструктора.
И в app.component.ts Импорт FetchDataService
//import
import { FetchdataService } from './fetchdata.service';Наконец, позвоните в сервис и запустите его.
app.component.ts:
Вы можете проверить демомер демонстрации на стеклиц Отказ
Упаковка
Мы только что охватывали самые популярные способы сделать запрос HTTP Call в JavaScript.
Спасибо за уделенное время. Если вам это понравится, хлопайте до 50, нажмите «Перейти» и добраться до меня на Twitter Отказ
Кстати, я недавно работал с сильной группой инженеров программного обеспечения для одного из моих мобильных приложений. Организация была великой, и продукт был доставлен очень быстро, намного быстрее, чем другие фирмы и фрилансеры, с которыми я работал, и я думаю, что могу честно рекомендовать их для других проектов. Застреляйте мне электронное письмо, если вы хотите связаться – wid@devsdata.com Отказ
Оригинал: “https://www.freecodecamp.org/news/here-is-the-most-popular-ways-to-make-an-http-request-in-javascript-954ce8c95aaa/”