Недавно я создал свое первое веб-приложение React, приложение Daily Journal, которое позволяет пользователю записывать свои мысли и воспоминания и упорядочивать их по дате. Несмотря на то, что приложение является базовым, для студента-разработчика этот проект — отличный способ попрактиковаться в создании запросов выборки, краеугольного камня как веб-разработки, так и Интернета в целом.
ЗАПРОС НА ПОЛУЧЕНИЕ
Интернет опирается на отношения клиент-сервер. клиент — это ваш компьютер, телефон или веб-браузер, например Chrome. клиенту необходимо отобразить некоторые данные на странице, поэтому он делает запрос к серверу, компьютеру, на котором хранятся ваши данные. сервер обещает клиенту, что он доставит запрошенные данные. Если проблем нет, обещание сохраняется, и сервер отвечает клиенту запрошенными данными. Затем клиент должен проанализировать ответ и обработать доставленные данные. Все это инициируется запросом на выборку GET.
Чтобы проиллюстрировать это, я расскажу, как я использую запрос GET для извлечения данных в свое приложение Daily Journal в React с моего локального сервера json.
НАСТРОЙКА ДАННЫХ
Я использовал json-server, чтобы раскрутить локальный сервер на своем компьютере. Затем я заставил его отслеживать файл db.json внутри моего приложения React в Visual Studio Code, в котором хранятся мои пользовательские данные. Если вы хотите протестировать свой собственный локальный json-сервер, POSTMAN — отличный ресурс.
ГОСУДАРСТВЕННЫЙ КРЮК
Перед настройкой запроса GET внутри компонента React я инициализировал переменную state для хранения данных, полученных с моего json-сервера. Для этого в React мы используем State Hook.
Давайте разберем это. В useState я установил начальное состояние в пустой массив. Затем я называю переменную состояния postData и функцию обновления setPostData. Теперь мой компонент имеет состояние и может передавать данные функции обновления setPostData для сохранения их в переменной postData.
ЭФФЕКТ КРЮК
Теперь, когда компонент имеет состояние, я использую ловушку эффекта для вызова моего запроса GET внутри блока кода. Перехватчик эффектов позволяет асинхронно запускать некоторый код после рендеринга компонента React.
Я обнаружил, что если я попытаюсь вызвать свой запрос GET без использования перехватчика Effect Hook, запрос GET будет вызван дважды, предположительно один раз после компонент отобразился, а затем еще раз, когда поток управления достиг запроса GET. Это создаст ошибку публикации дубликатов всех данных на странице.
AXIOS ПОЛУЧИТЬ ЗАПРОС
В JavaScript есть метод .fetch(), который инициирует процесс получения данных с сервера. Однако я решил использовать Axios для обработки моего запроса GET после того, как его порекомендовал мне друг-разработчик.
Синтаксис Axios сразу показался мне проще, чем метод .fetch(). Мне нравится, что не требуется метод response.json() для анализа данных и преобразования ответа в объект JavaScript. Я уверен, что у использования Axios есть и другие дополнительные преимущества, а также некоторые компромиссы. В качестве лучшей практики я прочитаю документацию Axios и MDN, чтобы узнать больше.
ОТОБРАЖЕНИЕ ДАННЫХ ИЗ ЗАПРОСА GET
Теперь, когда я получил успешный ответ от сервера, пришло время отобразить данные на странице. Поскольку я сохранил данные в переменной состояния postData, я могу перемещаться по массиву данных, вызывая метод .map() для postData.
ЗАКЛЮЧЕНИЕ
На данный момент существует некоторый синтаксис JSX, связанный с отрисовкой элементов на странице, а также использование реквизитов, с помощью которых React передает переменные и функции другим компонентам. Эти темы выходят за рамки этой статьи, но теперь у вас есть пошаговое описание того, как я использую запрос GET в своем приложении React для извлечения данных с сервера и передачи их в свое приложение React. компонент.
Пожалуйста, не стесняйтесь оставлять комментарии, мысли и рекомендации ниже. Спасибо!
