Метод Fetch используется в современном JavaScript для выполнения HTTP-запросов к серверу и получения данных в виде ответа, а также используется для отправки данных на сервер. Метод Fetch поддерживает различные методы Http, включая GET, POST, PUT. , УДАЛИТЬ и другие методы:

Современный способ получения данных с веб-сайта в JavaScript:

Как API выборки работает в фоновом режиме: Полный код приведен ниже: Подробное объяснение:

Давайте разберем каждую строку кода и поймем, что происходит:

Шаг 1: Мы создадим функцию fetch, которая принимает два аргумента: 1) URL-адрес и 2) параметры.

Здесь мы используем параметры, потому что мы отправляем POST-запросы, и при отправке почтового запроса нам нужно включить заголовки, аутентификацию и метод в параметры.

Итак, варианты будут выглядеть так:

Здесь method указывает метод HTTP-запроса. В нашем случае мы отправляем данные на серверы. Итак, мы используем POST-запросы.

В разделе заголовков есть два ключа, один из которых относится к типу контента, а второй — к авторизации:
Значения «Тип контента» — это «application/json» — давайте разберемся, что это значит.

Здесь JSON — это нотация объекта сценария Java, которая представляет собой формат данных, используемый для обмена данными между клиентом и сервером. Данные JSON содержат пары ключ-значение, такие как объекты:

Например:

Этот приведенный выше пример находится в формате JSON.

Приложение может быть мобильным приложением/веб-приложением/настольным приложением/. Здесь мы ИСПОЛЬЗУЕМ POST-запрос из Интернета, поэтому приложение будет ссылаться на веб-приложение.

Примечание. Существует разница между веб-страницей и веб-приложением: веб-страница — это статический документ, доступ к которому осуществляется через веб-браузер, который содержит текстовые/изображения, документы html, css, js, тогда как веб-приложение — это программное обеспечение, которое выполняет определенную задачу и имеет такие функции, как аутентификация, обработка данных и доступ к базе данных.

Далее следует заголовок авторизации:
здесь заголовок авторизации используется в HTTP-запросах для предоставления учетных данных аутентификации для запросов. Значение «токен носителя» означает, что клиент, которым мы отправляем токен доступа на сервер, где фактическим значением токена является строка «токен».

Сервер использует этот токен для аутентификации клиента и авторизации доступа к защищенным ресурсам.

Далее есть тело в заголовках.

Тело содержит фактические данные, которые используются для отправки данных на сервер. Данные представлены в виде объектов Java Script, которые затем преобразуются в формат JSON, а обмен данными осуществляется с использованием JSON FORMAT, как мы обсуждали в предыдущем разделе. Итак, чтобы преобразовать это в JSON, мы использовали.

JSON.STRINGIFY()

Далее для учетных данных:

Учетные данные обычно предназначены для настройки файлов cookie. Учетные данные настроены таким образом, что любые файлы cookie и заголовки проверки подлинности, связанные с доменом запроса, будут отправлены вместе с запросом.

Примечание. Свойство Credentials может быть включено только в том случае, если для заголовка access-control-allow-credentials установлено значение true на стороне сервера. ! важно: этот заголовок используется для указания того, что сервер позволяет клиенту отправлять учетные данные с запросами из разных источников.

СЛЕДУЮЩИЙ: функция выборки возвращает обещание:

Давайте вкратце узнаем об обещаниях:

Обещание означает обещание сделать что-то в будущем или по истечении определенного периода времени.

Например, представьте, что ваш друг обещает подарить вам игрушку. Они дают вам записку, в которой говорится: «Я обещаю подарить тебе игрушку позже». Вы можете сохранить записку и быть уверенным, что ваш друг когда-нибудь подарит вам игрушку.

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

Здесь Promise является встроенным объектом java Script, и в приведенном выше коде мы создаем экземпляр объекта, который имеет два значения: разрешение и отклонение. Мы можем использовать новое ключевое слово, поэтому обещание является одновременно классом и объектами в JS.

В промисе необходимо выполнить определенные операции, поэтому в первом коде мы создали операции с использованием xhr.

const xhr = новый XMLHttpRequest();

Мы создаем экземпляр xhr из объекта XMLHttpRequest, и этот объект также является встроенным js:

Давайте сначала узнаем о XMLHttpRequest, прежде чем углубляться в него:

Что такое XMLHttpRequest и как он работает?

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

Итак, мы создаем экземпляр xhr для отправки http-запросов на сервер.

ВАЖНАЯ ЧАСТЬ: МЫ ВЫЗЫВАЕМ МЕТОД ONLOAD И ONERROR ПЕРЕД ОТПРАВКОЙ ЗАПРОСОВ НА СЕРВЕР?
Причина вызова xhr.onload и xhr.onerror перед xhr.send() заключается в том, что эти методы определяют, что должно произойти, когда запрос будет выполнен (успешно или с ошибкой), поэтому их необходимо настроить. перед отправкой запроса на сервер.

Теперь, когда запрос был отправлен на сервер, ответ приходит с сервера, и запускается событие onload.

Как только ответ получен клиентом, запускается событие onload, и мы можем получить доступ к ответу от сервера, используя свойства responseText или responseXML объекта XMLHttpRequest. Мы также можем получить доступ к коду состояния HTTP, используя свойство status, и к тексту состояния HTTP, используя свойство statusText.
В этом случае обещание выполняется:

Решить (ответ)

Точно так же onerror запускается, если при выполнении запросов к серверам произошли какие-либо ошибки: ошибки могут быть связаны с сетевыми ошибками, ошибками подключения, отключением сервера и недопустимыми URL-адресами или доменными именами.

Обещание отклонено в этом случае

Отклонить (новый TypeError())

Здесь TypeError — это встроенные объекты js, мы просто создаем экземпляр этого объекта для консоли, регистрирующей ошибку.

Вышеупомянутые события onload и onerror являются подготовкой к обработке после того, как запрос был отправлен на сервер.

После этого мы действительно хотим отправить запрос на сервер, и для этого мы должны открыть соединение с сервером:

Чтобы открыть соединение, используется объект xhr для установления соединения между сервером и клиентом:

xhr.open(options.method || 'GET', url);

в параметрах есть два аргумента: (options.method и метод получения по умолчанию): < br /> Выражение options.method || «GET» означает, что если присутствует свойство options.method, его значение будет использоваться в качестве метода HTTP для запроса. Если его нет, метод HTTP по умолчанию будет «GET».

Теперь запутанная часть здесь:

Мы перебираем заголовки options.headers , вы можете спросить, зачем нам вообще нужно перебирать заголовок?.

Ответ:

Чтобы установить каждое свойство заголовка в объекте options.headers, нам нужно перебрать свойства объекта и вызвать xhr.setRequestHeader() один раз для каждого заголовка.

Цикл for…in в коде перебирает каждое свойство объекта options.headers и вызывает xhr.setRequestHeader(), чтобы установить соответствующий заголовок для запроса.

Итак, цель цикла — установить каждый заголовок в объекте options.headers в качестве заголовка HTTP для запроса.

Во второй строке кода выражение устанавливает заголовок HTTP с именем, указанным в заголовке, и значением, указанным во втором свойстве.

Пример:

Options.headers — это свойство объекта «тип содержимого», а значение — «application/json», мы также обсуждали это в приведенном выше коде.

Теперь окончательный код — нам нужно отправить запрос на сервер:

Xhr.send()-›, если мы используем запрос на получение

В этом примере мы используем запрос POST, поэтому нам нужно указать, что мы собираемся отправить:

Xhr.send(option.body) и options.body содержат данные json: наконец, весь код был подробно объяснен.

Таким образом, мы, наконец, поняли основы современного принципа работы метода выборки:

О, парень!!! Это было много!!! Спасибо за прочтение!!