Автор оригинала: Aniuchi Adaobi.
Вступление
Веб-приложение часто нужно взаимодействовать с веб-серверами, чтобы получить различные ресурсы. Вам может потребоваться получить данные или публиковать данные на внешний веб-сервер или API.
Использование JavaScript на стороне клиента, это может быть достигнуто с помощью API PRET API и window.fetch ()
функция. В Nodejs несколько пакетов/библиотек могут достигать того же результата. Один из них – Узел-выбор
упаковка.
Узел-выбор
это легкий модуль, который позволяет нам использовать fetch ()
Функция в Nodejs, с очень похожей на функциональность как window.fetch ()
В родном JavaScript, но с мало различий Отказ
Начало работы с узлом
Использовать Узел-выбор
В вашем проекте CD
В ваш каталог проекта и запустите:
$ npm install node-fetch
Чтобы использовать модуль в коде, используйте:
const fetch = require('node-fetch');
Как упоминалось ранее, fetch ()
Функция в Узел-выбор
Модуль ведет себя очень похожи на родных window.fetch ()
функция. Его подпись:
fetch(url[, options]);
URL
Параметр – это просто прямой URL для ресурса, который мы хотим получить. Это должно быть абсолютный URL или функция бросит ошибку. Дополнительный Варианты
Параметр используется, когда мы хотим использовать fetch ()
для чего-либо, кроме простого Получить
Запрос, но мы поговорим об этом более подробнее.
Функция возвращает Ответ
Объект, который содержит полезные функции и информацию о HTTP-ответе, например:
Текст ()
– возвращает тело ответа как строкуJSON ()
– анализирует тело ответа в объект JSON и бросает ошибку, если тело не может быть проанализированоСтатус
иstustustext
– Содержать информацию о коде состояния HTTPХорошо
– равенправда
ЕслиСтатус
это код состояния 2xx (успешный запрос)Заголовки
– Объект, содержащий заголовки ответа, доступ к конкретным заголовке, используя использованиеПолучить ()
функция.
Отправка получения запросов с использованием узла-извлечения
Существует два распространенных случая использования данных из веб-сервера. Возможно, вы захотите получить текст на веб-сервере, целую веб-страницу или данные с использованием API отдыха. Узел-выбор
Пакет позволяет вам делать все это.
Создайте каталог для вашего проекта, CD
В каталог и инициализируйте проект узла с настройками по умолчанию:
$ npm init -y
Это создаст Package.json
файл в каталоге. Далее установите Узел-выбор
Как показано выше и добавьте index.js
файл.
Получение текста или веб-страниц
Давайте сделаем простой Получить
Запрос на домашнюю страницу Google:
const fetch = require('node-fetch'); fetch('https://google.com') .then(res => res.text()) .then(text => console.log(text))
В указанном выше коде мы загружаем Узел-выбор
Модуль, а затем выбираете домашнюю страницу Google. Единственный параметр, который мы добавили в fetch ()
Функция – это URL-адрес сервера, к которому мы делаем HTTP-запрос. Потому что Узел-выбор
На основании обещания мы цеприем пару .then ()
Функции, чтобы помочь нам управлять ответом и данными по нашей просьбе.
В этой строке мы ждем, чтобы получить ответ от веб-сервера Google и преобразовывать его в текстовый формат:
.then(res => res.text());
Здесь мы ждем результата предыдущего преобразования и печати его к консоли:
.then(text => console.log(text));
Если мы запустим код выше из консоли:
$ node index.js
Мы получим всю HTML-разметку домашней страницы Google, зарегистрированную в консоль:
Получение данных JSON из API отдыха
Еще одно общее использование для Узел-выбор
Модуль получает данные с помощью API для отдыха.
Мы получим поддельные пользовательские данные из Jsonsholder Остальное API. Как и прежде, fetch ()
Функция берет в URL сервера и ожидает ответа.
Давайте посмотрим, как это работает:
const fetch = require('node-fetch'); fetch('https://jsonplaceholder.typicode.com/users') .then(res => res.json()) .then(json => { console.log("First user in the array:"); console.log(json[0]); console.log("Name of the first user in the array:"); console.log(json[0].name); })
Тело отклика HTTP содержит данные с форматом JSON, а именно массив, содержащий информацию о пользователях. С учетом этого мы использовали .json ()
Функция, и это позволило нам легко получить доступ к отдельным элементам и их полям.
Запуск этой программы даст нам:
First element in the array: { id: 1, name: 'Leanne Graham', username: 'Bret', email: '[email protected]', address: { street: 'Kulas Light', suite: 'Apt. 556', city: 'Gwenborough', zipcode: '92998-3874', geo: { lat: '-37.3159', lng: '81.1496' } }, phone: '1-770-736-8031 x56442', website: 'hildegard.org', company: { name: 'Romaguera-Crona', catchPhrase: 'Multi-layered client-server neural-net', bs: 'harness real-time e-markets' } } Name of the first person in the array: Leanne Graham
Мы также могли бы напечатать всю Джосон, возвращенную res.json ()
Отказ
Отправка почтовых запросов с использованием узла-извлечения
Мы также можем использовать fetch ()
Функция для публикации данных вместо того, чтобы извлекать его. Как мы упоминали ранее, fetch ()
Функция позволяет добавить дополнительный параметр, чтобы сделать Пост
Запросы на веб-сервер. Без этого необязательного параметра наш запрос – это Получить
Запрос по умолчанию.
Есть много возможных вариантов, которые мы можем установить с помощью этого параметра, но единственные, которые мы будем использовать в этой статье Метод
, Тело
и Заголовки
Отказ
Эти поля имеют прямые значения: Метод
Устанавливает, какой тип HTTP-запроса мы используем ( Post
в нашем случае), Тело
Содержит тело/данные нашей просьбы и Заголовки
Содержит все необходимые заголовки, которые в нашем случае это только Content-Type
Таким образом, нет никакой путаницы при анализе нашей просьбы.
Для полного списка вариантов вы можете посетить Документация Отказ
Мы продемонстрируем, как это работает, добавив новый предмет для Тодос JSONDHolder Отказ Давайте добавим новый элемент в этот список для пользователя, чьи ID
равен 123
Отказ Во-первых, нам нужно создать Todo
Объект, а позже преобразуйте его в JSON при добавлении его в Тело
поле:
const fetch = require('node-fetch'); let todo = { userId: 123, title: "loren impsum doloris", completed: false }; fetch('https://jsonplaceholder.typicode.com/todos', { method: 'POST', body: JSON.stringify(todo), headers: { 'Content-Type': 'application/json' } }).then(res => res.json()) .then(json => console.log(json));
Процесс очень похож на создание Получить
запрос. Мы позвонили fetch ()
Функция, с соответствующим URL, и мы устанавливаем необходимые варианты с использованием дополнительного параметра fetch ()
функция. Мы использовали Json.stringify ()
Чтобы преобразовать наш объект в строку с форматом JSON, прежде чем отправлять его на веб-сервер. Затем, как и с получением данных – мы ожидали ответа, преобразовали его на JSON и напечатали его на консоль.
Запуск кода дает нам выход:
{ userId: 123, title: 'loren impsum doloris', completed: false, id: 201 }
Обработка исключений и ошибок
Наши просьбы иногда могут потерпеть неудачу, по разным причинам – ошибка, возникающая в fetch ()
Функция, проблемы в интернете, внутренние ошибки сервера и другие. Нам нужен способ справиться с этими ситуациями, или в крайнем случае, если они могут видеть, что они произошли.
Мы можем обрабатывать исключения времени выполнения, добавив поймать ()
в конце цепочки обещания. Давайте добавим простой поймать ()
Функция нашей программы выше:
const fetch = require('node-fetch'); let todo = { userId: 123, title: "loren impsum doloris", completed: false } fetch('https://jsonplaceholder.typicode.com/todos', { method: 'POST', body: JSON.stringify(todo), headers: { 'Content-Type': 'application/json' } }).then(res => res.json()) .then(json => console.log(json)) .catch(err => console.log(err))
В идеале, вы не должны просто игнорировать и печатать ошибки, но вместо этого есть система на месте для обработки их.
Мы должны помнить, что если наш ответ имеет код состояния состояния 3xx/4xx/5xx, запрос либо неудачные, либо дополнительные шаги, которые необходимо предпринять клиентом.
А именно, коды состояния HTTPX HTTP указывают на то, что дополнительные шаги должны быть предприняты клиентом, коды 4xx указывают на неверный запрос, и коды 5xx указывают на ошибки сервера. Все эти коды статуса говорят нам, что наш запрос не был успешным в практических условиях.
поймать ()
Не будет регистрировать какие-либо из этих случаев, потому что связь с сервером прошла хорошо, то есть, мы сделали запрос и успешно получили ответ. Это означает, что нам нужно предпринять дополнительные шаги, чтобы убедиться, что мы охватываем ситуацию, когда связь Client-Server была успешной, но мы не получили ни одного из успешных (2xx) кодов состояния HTTP.
Общий способ убедиться, что ошибки запросы бросают ошибку – создать функцию, которая проверяет состояние HTTP-файла отклика с сервера. В этой функции, если код состояния не указывает на успех, мы можем бросить ошибку и поймать ()
поймаю это
Мы можем использовать ранее упомянутые Хорошо
поле Ответ
объекты, которые равны правда
Если код состояния 2xx.
Давайте посмотрим, как это работает:
const fetch = require('node-fetch'); function checkResponseStatus(res) { if(res.ok){ return res } else { throw new Error(`The HTTP status of the reponse: ${res.status} (${res.statusText})`); } } fetch('https://jsonplaceholder.typicode.com/MissingResource') .then(checkResponseStatus); .then(res => res.json()); .then(json => console.log(json)); .catch(err => console.log(err));
Мы использовали функцию в начале цепочки для обещания (перед тем, как разбирать тело ответного отклика), чтобы увидеть, столкнулись ли мы вопросом. Вы также можете бросить пользовательскую ошибку вместо этого.
Опять же, вы должны иметь стратегию на месте для обработки ошибок, как это, вместо того, чтобы просто печатать на консоль.
Если все пошло, как и ожидалось, и код состояния указывал на успех, программа будет продолжаться как раньше.
Заключение
Создание запросов на веб-серверы – это общая задача веб-разработки и в этой статье, мы видели, как мы можем сделать это эффективно использовать Узел-выбор
– Библиотека, которая делает API родного браузера FECT, совместимым с NODEJS.
В дополнение к этому, мы также посмотрели на то, как обрабатывать ошибки, которые могут возникнуть с HTTP-запросами.