Я учусь на инженера-программиста в школе Flatiron, в настоящее время завершаю Фазу-1. Первый этап представляет собой интенсивное трехнедельное испытание, в ходе которого студенты должны сохранить как можно больше информации о javascript, HTML и CSS. Хотя последние 2 необходимы для веб-сайта для демонстрации своего контента, страница действительно оживает с JS. Ключевыми понятиями, которые я изучил в JS, были манипулирование DOM, прослушивание событий и тема этого блога выборка. Извлечение — это асинхронная функция(), которая позволяет разработчикам взаимодействовать как с локальными, так и с внешними источниками данных для получения, добавления, удаления и изменения данных. ЭТО МОЩНО.
Получение объяснения
По умолчанию запрос на получение является запросом на получение, если не указано иное (POST, DELETE, PATCH). Ниже я привел пример Fetch-запроса от MDN:
1)fetch(‘http://example.com/movies.json')
Первая строка отправляет запрос в домен example.com и специально нацелена на данные, хранящиеся в Movies.json.
2).then((ответ) =› response.json())
Сервер возвращает обещание, к которому мы можем получить доступ через ключевое слово response. Обещание — это абстрактный способ сказать, что сервер нашел данные, которые вы ищете, и предоставит их вам. В общем случае ответом нельзя манипулировать, так как он является представлением необходимых вам данных. Чтобы работать с запрошенными данными, ответ необходимо преобразовать в формат по вашему выбору. Преобразование в json выполняется путем вызова функции .json() в этом конкретном случае.
3).then((данные) =› console.log(данные));
В заключительном действии проанализированному response.json() присваивается имя data, и содержимое data становится доступным для просмотра. в вашем терминале разработки или на вкладке консоли вашего инструмента разработчика браузера.
Извлечение и API
Завершая наше путешествие на первом этапе, мне и членам моей группы было поручено создать одностраничное приложение. Наши основные результаты требовали, чтобы наш SPA продемонстрировал использование 3 прослушивателей событий, манипулирование DOM и выборку в локальный или внешний API. Работа с API представляла собой трехуровневую задачу. Нам нужно выяснить, как получить доступ к необходимым данным с помощью нашего первоначального запроса GET, правильно получить доступ к данным в ответе и манипулировать ответом, чтобы включить данные в наш веб-сайт. Процесс заставил задуматься и привел к созданию QWALLET.
Бессовестная вилка — QWALLET
QWALLET — это цифровой кошелек, в котором хранится коллекция QR-кодов пользователей. QR означает быстрый ответ и представляет собой легко сканируемое графическое представление выбора личной информации пользователя. QR-коды могут кодировать домашние и рабочие пароли Wi-Fi, ссылки на сайты социальных сетей, платежные аккаунты и многое другое. Итак, как мы этого добились? Мы использовали бесплатный API генерации QR. В нашем запросе на выборку к API URL-адрес должен был включать определенный текст, который мы хотели закодировать. Мы предоставили это, используя пользовательский ввод в событии отправки формы и интерполируя эту информацию в URL-адрес запроса на выборку. В ответ мы получили URL-адрес файла png. Затем мы создали тег изображения HTML, присвоили возвращенный URL-адрес источнику тега изображения и добавили его в модель DOM. Чтобы повторно использовать QR-коды, мы создали локальный json-сервер с помощью node.js и вызвали выборку с помощью метода POST. Это добавило новый QR-код на наш локальный сервер и сохранило его для будущего использования. Точно так же мы вызвали выборку с помощью метода DELETE, чтобы удалить устаревшие QR-коды.
Заворачивать
Изучение выборки и внедрение ее основных методов, а также взаимодействие с внешним и локальным API было образовательным опытом. И описание всего процесса действительно помогло закрепить концепции, полученные в ходе этого командного проекта. Особая благодарность членам моей команды Адаму, Рошель и Вероник за предоставление практики эффективного сотрудничества и своевременного выполнения.
