Отправить информацию обратно в браузер

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

Вот первая часть этого блога: https://medium.com/@musta7188/accessing-api-from-browser-node-js-using-the-npm-library-express-part-1-dfcef060b715

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

До сих пор нам удалось получить доступ к свойству поиска в объектном запросе и увидеть значение.

Как видите, напечатав в консоли (req.query.search), мы можем получить доступ к значениям игрушек.

Предположим, что поисковый запрос теперь обязателен в запросе, и если он не указан, пользователь получит сообщение об ошибке. Для этого мы собираемся использовать оператор if, чтобы добавить в функцию немного условной логики.

Мы создали оператор, который проверяет, нет ли условия поиска для отправки сообщения об ошибке. мы использовали оператор “!”, чтобы изменить истинное значение на ложное. В этом случае, если мы не передаем какое-либо значение поиска, мы должны получить сообщение об ошибке «вы должны указать поисковый запрос», иначе мы отправим в качестве ответа продукты.

Я намеренно сделал ошибку, неправильно написав эту функцию, потому что хотел поделиться распространенной ошибкой, которая часто появляется, и объяснить, почему это происходит и как ее решить.

Теперь в браузере давайте удалим всю строку запроса, которую мы написали, чтобы увидеть, работает ли наша функция.

Как видите, мы удалили всю строку запроса и оставили http://localhost:3000/products, не предоставляя никаких поисковых запросов, наш сервер отправляет сообщение об ошибке, ОТЛИЧНО! Наша функция работает так, как мы хотим. Однако, если вы вернетесь к терминалу, вы увидите сообщение об ошибке, подобное этому:

Нас интересует именно эта часть (Ошибка [ERR_HTTP_HEADERS_SENT]: невозможно установить заголовки после их отправки клиенту), так что же происходит? Эта ошибка появляется, если вы пытаетесь ответить на запрос дважды, HTTP-запрос имеет один запрос, который направляется на сервер, и один ответ, который возвращается. В нашей функции мы пытаемся ответить дважды. Если условия поиска нет, мы отправляем сообщение об ошибке, но мы также отправляем объект продуктов ниже.

Чтобы решить это распространенное сообщение об ошибке, нам нужно только вернуть наш ответ внутри инструкции.

используя return, мы останавливаем выполнение любой другой части функции, что означает, что приведенный ниже код не будет отправлять объект продукта.

другой способ решить эту проблему — добавить оператор else для запуска первого кода, если выполняется условие, в случае запуска второй части кода.

Теперь попробуйте обновить браузер, и вы увидите, что сообщение об ошибке больше не появится в терминале.

Теперь попробуйте сделать наоборот и отправить поисковый запрос со строкой запроса, и вы должны увидеть объект продукта, появившийся в браузере.

Мы увидели, что наша логика работает нормально. Мы узнали, как браузер может взаимодействовать с сервером и передавать информацию, и как сервер может получить доступ к этой информации и использовать ее для построения логики и отправки ответа.

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