В этой статье будет представлен краткий обзор использования JavaScript для выполнения запроса PATCH в DOM. Метод запроса PATCH используется для обновления или частичного изменения источника данных через HTTP. Это делается с помощью многоступенчатого процесса и начинается с небольшой переменной гигиены.

ШАГ 1: ПОЛУЧИТЬ

Чтобы упростить этот процесс и не повторяться в нашем коде, мы начнем с создания переменной для URL-адреса или API (интерфейс прикладной программы), на которые мы ссылаемся. Для простоты чтения и использования в верхней части файла JavaScript или рядом с ней объявите глобальную переменную:

const BASE_URL = "http://"insert-link-or-local-reference-here/"

Полезно заканчивать этот URL-адрес или любой URL-адрес, на который вы можете ссылаться в PATCH, POST или аналогичном методе, знаком «/», чтобы облегчить связь между вашим URL-адресом и другими скрытыми элементами JavaScript.

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

Мы начинаем с извлечения BASE_URL .then (представьте себе этот оператор просто как наречие «тогда»), мы берем ответ (здесь сокращено до res) и используем стрелочную функцию с ее неявным возвратом, чтобы преобразовать его в response.json( ). Здесь .json() — это встроенная в JavaScript функция, которая принимает ответную информацию, BASE_URL, и считывает ее, формируя необработанный JSON в обещание объекта JavaScript. В этом примере мы используем console.log(), чтобы увидеть обещание объекта в консоли браузера.

Если мы получаем объектный ответ в нашем console.log(), становится ясно, что у нас есть доступ к информации, хранящейся в HTTP. Теперь, в задней половине второго оператора .then, мы можем начать манипулировать нашим обещанием объекта JavaScript в функциях и коде.

ШАГ 2: СЛУШАЙТЕ

Второй шаг нашего запроса PATCH — определить событие, которое мы хотим отслеживать или «прослушивать». При запуске это событие сообщит нам, что предпринимается попытка передать информацию на сервер, который мы будем использовать для обновления HTTP. Мы отслеживаем эти события с помощью метода .addEventListner(). Существует множество разновидностей EventListners, которые могут отслеживать пользовательские события, такие как щелчки мыши и нажатия клавиш для загрузки или выгрузки.

Как вы, наверное, заметили, функция EventListener начинается с «.» указывая, что он должен быть сначала присоединен к элементу. Мы можем прикрепить их где угодно, от переменных до объектов HTML, единственное, что здесь важно, это помнить, что ваша цель должна быть тем, что вы пытаетесь отслеживать. Вот примеры нескольких простых способов присоединения EventListeners:

Синтаксис здесь преднамеренно общий и призван продемонстрировать, что вы можете прикреплять эти EventListeners к переменным, элементам, объектам DOM и даже подключать их к самому объекту окна. После того, как вы нашли дом для EventListener, вы можете передать несколько аргументов. Само событие, которое отслеживает тип EventListener (щелчок, нажатие клавиши, нажатие клавиши, отправка и т. д.), а также функции, которые вы хотите, чтобы событие выполнялось. Можно даже использовать стрелочную функцию => для построения встроенной логики.

ШАГ 3: ОПРЕДЕЛИТЕ

Теперь, когда у нас есть EventListner, подключенный к элементу, который мы хотим прослушивать, нам нужно определить, какую информацию мы надеемся передать в наш PATCH. Это может быть как просто, так и сложно, в зависимости от функциональности вашего продукта, от одной строки до целых массивов объектов. Поскольку ваш автор на момент написания статьи был новичком, мы начнем с чего-то довольно простого.

Мы определим параметры нашего PATCH, создав переменную, в которой будут храниться данные PATCH. Примеры переменных, определяющих некоторые данные патча, могут выглядеть примерно так:

Какие бы данные вы ни пытались ИСПРАВИТЬ, убедитесь, что у вас есть правильный адрес, где хранятся эти данные. Используйте свой debugger, чтобы найти, где находится эта информация, и используйте правильный синтаксис для извлечения этих данных из их источника!

После того, как мы установили, какие данные мы хотим передать в PATCH, и создали необходимый для этого код, мы переходим к переводу этой информации обратно в JSON, чтобы машина могла ее интерпретировать. Это подводит нас к четвертому шагу, переводу.

ШАГ 4: ПЕРЕВОД

На этом шаге мы должны взять данные, которые мы хотим ИСПРАВИТЬ, и перевести их на язык, понятный машине. Простой способ сделать это — использовать заголовок, метод и тело операции и привязать их к переменной. Для этого мы по существу запрашиваем информацию об объекте, которую мы только что создали, и прогоняем ее через несколько шагов, чтобы преобразовать в машинный язык. Обычно эту переменную объявляют примерно так: «reqObj» — объект запроса. Структуру этого фрагмента кода можно записать так просто:

Каждая клавиша в этом объекте выполняет определенную функцию, необходимую для переформатирования информации для использования машиной. Заголовки (которые для запуска должны быть написаны с буквой «s») ориентируют данные, метод определяет выполняемую операцию, и, наконец, тело считывает данные, которые вы определили, и преобразует их обратно в JSON.

Это подводит нас к последнему шагу в нашем процессе PATCH, окончательной выборке и исправлению.

ШАГ 5: ПОСЛЕДНЯЯ ЗАГРУЗКА И ИСПРАВЛЕНИЕ

Этот шаг требует немного причудливой работы ног. Он построен аналогично первой выборке, которую мы сделали в начале этого процесса; однако для этого требуется передать две переменные *и*, ​​чтобы изменить HTTP-адрес. Поиск дополнительной информации, необходимой для обновления URL-адреса, может быть сложным, и часто рекомендуется добавить идентификатор к элементу, к которому вы присоединили EventListener. Эта окончательная структура выборки и исправления может выглядеть примерно так:

Обязательно опирайтесь на console.log() и debugger здесь, чтобы убедиться, что ваш обновленный URL-адрес ведет к правильному месту в HTTP, и что данные, анализируемые res.json(), оказывают желаемый эффект на цель вашего патча. Пример, описанный выше, является очень простой версией того, что может быть невероятно сложным и мощным инструментом. Целые функции могут быть переданы и логика применена к этому процессу.

Надеюсь, эта короткая статья помогла вам получить общее представление об операции PATCHing в JavaScript!