Мы делаем это все время.

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

Как начинающий инженер-программист, я узнал, что это совсем не так! Вот краткий обзор.

Выше приведен пример RESTful API. Этот простой фрагмент кода обеспечивает связь и обмен ресурсами между клиентом (пользователем) и сервером (например, instagram.com). Ресурсы — это данные, такие как текстовые и графические файлы или информация о пользователе, и ими необходимо программно управлять, чтобы предоставить пользователю беспроблемный опыт работы на любом заданном веб-сайте.

Например, указанный выше URL ведет к json-серверу со списком книг, которые я хотел бы купить. Когда сайт загружается, книги сразу появляются в виде таблицы. Под капотом делается запрос на сервер ресурсов, списка книг, которые затем графически представлены на веб-странице с помощью JavaScript, HTML и CSS.

Процесс начинается с метода fetch(). Согласно MDN, метод fetch() принимает один обязательный аргумент — путь к ресурсам, которые вы хотите получить. Он возвращает обещание, которое разрешается в ответ на этот запрос…. После того, как ответ получен, существует ряд доступных методов для определения того, что представляет собой содержимое тела и как оно должно быть передано.

Там много сказано, и я пройдусь по этому. Прежде чем сервер вернет список книг, он отправит обещание. Обещание — это именно то, на что это похоже. Сервер сообщает клиенту, что он получил запрос, и обещает либо выполнить, либо отклонить запрос.

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

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

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

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

Я хотел бы сделать шаг назад на мгновение. В приведенном выше примере в метод fetch() передается URL-адрес. Но нам также необходимо предоставить более подробную информацию о том, что делать с информацией клиенту или серверу. Эти детали, известные как свойства, заключены в фигурные скобки.

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

Методы HTTP-запроса сигнализируют о том, что мы хотим создать новые данные (POST), обновить или заменить существующие данные (PATCH или POST), удалить данные (DELETE) или просто прочитать их (GET).

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

Следующими свойствами являются заголовки HTTP. Как правило, они группируются по контексту. Это означает, что они сгруппированы по дополнительной информации, предоставляемой клиенту или серверу во время запросов и ответов. Как и методы, существует много типов заголовков HTTP, и разнообразие информации, которую они предоставляют, выходит за рамки этой статьи. Но самые распространенные из них:

Заголовки запроса: помогают серверу лучше понять запрос клиента.

Заголовки ответа: позволяют серверам предоставлять больше контекста в своем ответе. Какой сервер используется, его местоположение или время в секундах, когда информация находилась в кеше прокси.

Заголовки представления: содержат информацию о ресурсах. В приведенном выше примере серверу сообщается, как отформатирован ресурс (тип содержимого) и в каком формате клиент хотел бы, чтобы ресурсы отправлялись (принять).

Все в порядке. Мы получили обещание и теперь получаем ответ.

Все, что нам действительно нужно, — это данные, которые находятся в теле объекта ответа. К сожалению, эти данные нельзя сразу прочитать. Его нужно преобразовать в объект JSON, что-то, что можно читать и манипулировать.

Давайте еще раз взглянем на этот пример. Мы почти до конца.

(Я расскажу о json.stringify() в другом посте блога, так как это интересный инструмент, который заслуживает отдельного поста. А пока просто знайте, что он берет объект json и превращает его в строку.)

then() принимает функцию обратного вызова в качестве аргумента. Первый метод then() принимает ответ (помеченный как «res») и анализирует его в объект json с помощью функции обратного вызова res.json(). Но это еще не сделано. Другой метод then() связан, потому что json() собирается вернуть другое обещание. Это обещание содержит наши данные, которыми можно манипулировать в DOM.

И вот оно! На консоль выведен долгожданный список книг. Теперь вместо console.log можно написать код, указывающий, как мы хотим, чтобы эти данные отображались на веб-сайте.

Ресурсы и дополнительная литература:

· https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

· https://www.youtube.com/watch?v=76CcJ90Lz4U

· https://developer.mozilla.org/en-US/docs/Web/HTTP/Обзор

· https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

· https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

· https://www.youtube.com/watch?v=DHvZLI7Db8E

· https://www.youtube.com/watch?v=cuEtnrL9-H0

· https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise