Получение данных с сервера
Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки всей новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые делают это возможным, например XMLHttpRequest и API Fetch.
| Необходимые условия: | Основы JavaScript (см. первые шаги, структурные элементы, объекты JavaScript), основы клиентских API |
|---|---|
| Задача: | Узнать, как извлекать данные с сервера и использовать их для обновления содержимого веб-страницы. |
В чем проблема?
Первоначальная загрузка страницы в Интернете была простой — вы отправляли запрос на сервер web-сайта, и если всё работает, как и должно, то вся необходимая информация о странице будет загружена и отображена на вашем компьютере.
Проблема с этой моделью заключается в том, что всякий раз, когда вы хотите обновить любую часть страницы, например, чтобы отобразить новый набор продуктов или загрузить новую страницу, вам нужно снова загрузить всю страницу. Это очень расточительно и приводит к плохому пользовательскому опыту, особенно по мере того, как страницы становятся все более сложными.
Появление Ajax
Это привело к созданию технологий, позволяющих веб-страницам запрашивать небольшие фрагменты данных (например, HTML, XML, JSON или обычный текст) и отображать их только при необходимости, помогая решать проблему, описанную выше.
Это достигается с помощью таких API, как XMLHttpRequest или — более новой — Fetch API. Эти технологии позволяют веб-страницам напрямую обрабатывать запросы HTTP для определённых ресурсов, доступных на сервере, и форматировать результирующие данные по мере необходимости перед их отображением.
Примечание: Вначале эта общая техника была известна как Асинхронный JavaScript и XML (Ajax), поскольку она, как правило, использовала XMLHttpRequest для запроса данных XML. В наши дни это обычно не так (вы, скорее всего, будете использовать XMLHttpRequest или Fetch для запроса JSON), но результат все тот же, и термин «Ajax» по-прежнему часто используется для описания этой техники.
Модель Ajax предполагает использование веб-API в качестве прокси для более разумного запроса данных, а не просто для того, чтобы браузер перезагружал всю страницу. Давайте подумаем о значении этого:
- Перейдите на один из ваших любимых сайтов, богатых информацией, таких как Amazon, YouTube, CNN и т.д., и загрузите его.
- Теперь найдите что-нибудь, например, новый продукт. Основной контент изменится, но большая часть информации, подобной заголовку, нижнему колонтитулу, навигационному меню и т. д., останется неизменной.
Это действительно хорошо, потому что:
- Обновления страницы намного быстрее, и вам не нужно ждать перезагрузки страницы, а это означает, что сайт работает быстрее и воспринимается более отзывчивым.
- Меньше данных загружается при каждом обновлении, что означает меньшее потребление пропускной способности. Это не может быть такой большой проблемой на рабочем столе в широкополосном подключении, но это серьёзная проблема на мобильных устройствах и в развивающихся странах, которые не имеют повсеместного быстрого интернет-сервиса.
Чтобы ускорить работу, некоторые сайты также сохраняют необходимые файлы и данные на компьютере пользователя при первом обращении к сайту, а это означает, что при последующих посещениях они используют локальные версии вместо загрузки свежих копий, как при первой загрузке страницы. Содержимое загружается с сервера только при его обновлении.
Основной запрос Ajax
Давайте посмотрим, как обрабатывается такой запрос, используя как XMLHttpRequest , так и Fetch. В этих примерах мы будем запрашивать данные из нескольких текстовых файлов и использовать их для заполнения области содержимого.
Этот набор файлов будет действовать как наша поддельная база данных; в реальном приложении мы с большей вероятностью будем использовать серверный язык, такой как PHP, Python или Node, чтобы запрашивать наши данные из базы данных. Здесь, однако, мы хотим сохранить его простым и сосредоточиться на стороне клиента.
XMLHttpRequest
XMLHttpRequest (который часто сокращается до XHR) является довольно старой технологией сейчас — он был изобретён Microsoft в конце 1990-х годов и уже довольно долго стандартизирован в браузерах.
- Чтобы начать этот пример, создайте локальную копию ajax-start.html и четырёх текстовых файлов — verse1.txt, verse2.txt, verse3.txt и verse4.txt — в новом каталоге на вашем компьютере. В этом примере мы загрузим другое стихотворение (который вы вполне можете распознать) через XHR, когда он будет выбран в выпадающем меню.
- Внутри элемента добавьте следующий код. В нем хранится ссылка на элементы и в переменных и определяется onchange обработчика событий, так что, когда значение select изменяется, его значение передаётся вызываемой функции updateDisplay() в качестве параметра.
var verseChoose = document.querySelector("select"); var poemDisplay = document.querySelector("pre"); verseChoose.onchange = function () var verse = verseChoose.value; updateDisplay(verse); >;
function updateDisplay(verse) >
= verse.replace(" ", ""); verse = verse.toLowerCase(); var url = verse + ".txt";
var request = new XMLHttpRequest();
.open("GET", url);
.responseType = "text";
.onload = function () poemDisplay.textContent = request.response; >;
.send();
updateDisplay("Verse 1"); verseChoose.value = "Verse 1";
Обслуживание вашего примера с сервера
Некоторые браузеры (включая Chrome) не будут запускать запросы XHR, если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с Website security).
Чтобы обойти это, нам нужно протестировать пример, запустив его через локальный веб-сервер. Чтобы узнать, как это сделать, прочитайте Как настроить локальный тестовый сервер?
Fetch
API-интерфейс Fetch — это, в основном, современная замена XHR — недавно он был представлен в браузерах для упрощения асинхронных HTTP-запросов в JavaScript, как для разработчиков, так и для других API, которые строятся поверх Fetch.
Давайте преобразуем последний пример, чтобы использовать Fetch!
- Сделайте копию своего предыдущего готового каталога примеров. (Если вы не работали над предыдущим упражнением, создайте новый каталог и внутри него создайте копии xhr-basic.html и четырёх текстовых файлов — verse1.txt, verse2.txt, verse3.txt и verse4.txt.)
- Внутри функции updateDisplay() найдите код XHR:
var request = new XMLHttpRequest(); request.open("GET", url); request.responseType = "text"; request.onload = function () poemDisplay.textContent = request.response; >; request.send();
fetch(url).then(function (response) response.text().then(function (text) poemDisplay.textContent = text; >); >);
Итак, что происходит в коде Fetch?
Прежде всего, мы вызываем метод fetch() , передавая ему URL-адрес ресурса, который мы хотим получить. Это современный эквивалент request.open() в XHR, плюс вам не нужен эквивалент .send() .
После этого вы можете увидеть метод .then() , прикреплённый в конец fetch() — этот метод является частью Promises — современная функция JavaScript для выполнения асинхронных операций. fetch() возвращает промис, который разрешает ответ, отправленный обратно с сервера, — мы используем .then() для запуска некоторого последующего кода после того, как промис будет разрешено, что является функцией, которую мы определили внутри неё. Это эквивалент обработчика события onload в XHR-версии.
Эта функция автоматически передаёт ответ от сервера в качестве параметра, когда обещает fetch() . Внутри функции мы берём ответ и запускаем его метод text() (en-US), который в основном возвращает ответ как необработанный текст. Это эквивалент request.responseType = ‘text’ в версии XHR.
Вы увидите, что text() также возвращает промис, поэтому мы привязываем к нему другой .then() , внутри которого мы определяем функцию для получения необработанного текста, который выполняет text() .
Внутри функции внутреннего промиса мы делаем то же самое, что и в версии XHR, — устанавливаем текстовое содержимое в текстовое значение.
Помимо промисов
Промисы немного запутывают первый раз, когда вы их встречаете, но не беспокойтесь об этом слишком долго. Через некоторое время вы привыкнете к ним, особенно, когда вы узнаете больше о современных JavaScript-API. Большинство из них в большей степени основаны на промисах.
Давайте посмотрим на структуру промисов сверху, чтобы увидеть, можем ли мы ещё немного понять это:
fetch(url).then(function (response) response.text().then(function (text) poemDisplay.textContent = text; >); >);
В первой строке говорится: «Получить ресурс, расположенный по адресу url» (fetch(url) ) и «затем запустить указанную функцию, когда промис будет разрешено» ( .then(function() < . >) ). «Resolve» означает «завершить выполнение указанной операции в какой-то момент в будущем». Указанная операция в этом случае заключается в извлечении ресурса с указанного URL (с использованием HTTP-запроса) и возврата ответа для нас, чтобы что-то сделать.
Фактически, функция, переданная в then() , представляет собой кусок кода, который не запускается немедленно — вместо этого он будет работать в какой-то момент в будущем, когда ответ будет возвращён. Обратите внимание, что вы также можете сохранить своё промис в переменной и цепочку .then() вместо этого. Ниже код будет делать то же самое:
var myFetch = fetch(url); myFetch.then(function (response) response.text().then(function (text) poemDisplay.textContent = text; >); >);
Поскольку метод fetch() возвращает промис, который разрешает HTTP-ответ, любая функция, которую вы определяете внутри .then() , прикованная к концу, будет автоматически передаваться как параметр. Вы можете вызвать параметр, который вам нравится — приведённый ниже пример будет работать:
fetch(url).then(function (dogBiscuits) dogBiscuits.text().then(function (text) poemDisplay.textContent = text; >); >);
Но имеет смысл называть параметр тем, что описывает его содержимое!
Теперь давайте сосредоточимся только на функции:
function(response) response.text().then(function(text) poemDisplay.textContent = text; >); >
Объект ответа имеет метод text() (en-US), который берёт необработанные данные, содержащиеся в теле ответа, и превращает его в обычный текст, который является форматом, который мы хотим в нем А также возвращает промис (который разрешает полученную текстовую строку), поэтому здесь мы используем другой .then() , внутри которого мы определяем другую функцию, которая диктует что мы хотим сделать с этой текстовой строкой. Мы просто устанавливаем свойство textContent элемента нашего стихотворения равным текстовой строке, так что это получается довольно просто.
Также стоит отметить, что вы можете напрямую связывать несколько блоков промисов ( .then() , но есть и другие типы) на конце друг друга, передавая результат каждого блока следующему блоку по мере продвижения по цепочке , Это делает промисы очень мощными.
Следующий блок делает то же самое, что и наш оригинальный пример, но написан в другом стиле:
fetch(url) .then(function (response) return response.text(); >) .then(function (text) poemDisplay.textContent = text; >);
Многие разработчики любят этот стиль больше, поскольку он более плоский и, возможно, легче читать для более длинных цепочек промисов — каждое последующее промис приходит после предыдущего, а не внутри предыдущего (что может стать громоздким). Единственное отличие состоит в том, что мы должны были включить оператор return перед response.text() , чтобы заставить его передать результат в следующую ссылку в цепочке.
Какой механизм следует использовать?
Это действительно зависит от того, над каким проектом вы работаете. XHR существует уже давно и имеет отличную кросс-браузерную поддержку. Fetch and Promises, с другой стороны, являются более поздним дополнением к веб-платформе, хотя они хорошо поддерживаются в браузере, за исключением Internet Explorer и Safari (которые на момент написания Fetch были доступны в своём предварительный просмотр технологии).
Если вам необходимо поддерживать старые браузеры, тогда может быть предпочтительным решение XHR. Если, однако, вы работаете над более прогрессивным проектом и не так обеспокоены старыми браузерами, то Fetch может быть хорошим выбором.
Вам действительно нужно учиться — Fetch станет более популярным, так как Internet Explorer отказывается от использования (IE больше не разрабатывается, в пользу нового браузера Microsoft Edge), но вам может понадобиться XHR ещё некоторое время.
Более сложный пример
Чтобы завершить статью, мы рассмотрим несколько более сложный пример, который показывает более интересные применения Fetch. Мы создали образец сайта под названием The Can Store — это вымышленный супермаркет, который продаёт только консервы. Вы можете найти этот пример в прямом эфире на GitHub и посмотреть исходный код.
По умолчанию на сайте отображаются все продукты, но вы можете использовать элементы управления формы в столбце слева, чтобы отфильтровать их по категориям, поисковому запросу или и тому и другому.
Существует довольно много сложного кода, который включает фильтрацию продуктов по категориям и поисковым запросам, манипулирование строками, чтобы данные отображались правильно в пользовательском интерфейсе и т.д. Мы не будем обсуждать все это в статье, но вы можете найти обширные комментарии в коде (см. can-script.js).
Однако мы объясним код Fetch.
Первый блок, который использует Fetch, можно найти в начале JavaScript:
fetch("products.json").then(function (response) if (response.ok) response.json().then(function (json) products = json; initialize(); >); > else console.log( "Network request for products.json failed with response " + response.status + ": " + response.statusText, ); > >);
Это похоже на то, что мы видели раньше, за исключением того, что второй промис находится в условном выражении. В этом случае мы проверяем, был ли возвращённый ответ успешным — свойство response.ok (en-US) содержит логическое значение, которое true , если ответ был в порядке (например, 200 meaning «OK») или false , если он не увенчался успехом.
Если ответ был успешным, мы выполняем второй промис — на этот раз мы используем json() (en-US), а не text() (en-US), так как мы хотим вернуть наш ответ как структурированные данные JSON, а не обычный текст.
Если ответ не увенчался успехом, мы выводим сообщение об ошибке в консоль, в котором сообщается о сбое сетевого запроса, который сообщает о статусе сети и описательном сообщении ответа (содержащемся в response.status (en-US) и response.statusText (en-US), соответственно). Конечно, полный веб-сайт будет обрабатывать эту ошибку более грациозно, отображая сообщение на экране пользователя и, возможно, предлагая варианты для исправления ситуации.
Вы можете проверить сам случай отказа:
- Создание локальной копии файлов примеров (загрузка и распаковка the can-store ZIP file)
- Запустите код через веб-сервер (как описано выше, в Serving your example from a server)
- Измените путь к извлечённому файлу, например, «product.json» (т.е. убедитесь, что он написан неправильно)
- Теперь загрузите индексный файл в свой браузер (например, через localhost:8000 ) и посмотрите в консоли разработчика браузера. Вы увидите сообщение в строке «Запрос сети для продуктов.json не удалось с ответом 404: Файл не найден»
Второй блок Fetch можно найти внутри функции fetchBlob() :
fetch(url).then(function (response) if (response.ok) response.blob().then(function (blob) objectURL = URL.createObjectURL(blob); showProduct(objectURL, product); >); > else console.log( 'Network request for "' + product.name + '" image failed with response ' + response.status + ": " + response.statusText, ); > >);
Это работает во многом так же, как и предыдущий, за исключением того, что вместо использования json() (en-US) мы используем blob() (en-US) — в этом случае мы хотим вернуть наш ответ в виде файла изображения, а формат данных, который мы используем для этого — Blob — этот термин является аббревиатурой от« Binary Large Object »и может в основном использоваться для представляют собой большие файловые объекты, такие как изображения или видеофайлы.
После того как мы успешно получили наш blob, мы создаём URL-адрес объекта, используя createObjectURL() . Это возвращает временный внутренний URL-адрес, указывающий на объект, указанный в браузере. Они не очень читаемы, но вы можете видеть, как выглядит, открывая приложение Can Store, Ctrl-/щёлкнуть правой кнопкой мыши по изображению и выбрать опцию «Просмотр изображения» (которая может немного отличаться в зависимости от того, какой браузер вы ). URL-адрес объекта будет отображаться внутри адресной строки и должен выглядеть примерно так:
blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4
Вызов: XHR версия the Can Store
Мы хотели бы, чтобы вы решили преобразовать версию приложения Fetch для использования XHR в качестве полезной части практики. Возьмите копию ZIP файла и попробуйте изменить JavaScript, если это необходимо.
Некоторые полезные советы:
- Вы можете найти полезный справочный материал XMLHttpRequest .
- Вам в основном нужно использовать тот же шаблон, что и раньше, в примере XHR-basic.html.
- Однако вам нужно будет добавить обработку ошибок, которые мы показали вам в версии Fetch Can Store:
- Ответ найден в request.response после того, как событие load запущено, а не в промисе then() .
- О наилучшем эквиваленте Fetch’s response.ok в XHR следует проверить, является ли request.status равным 200 или если request.readyState равно 4.
- Свойства для получения статуса и сообщения состояния одинаковы, но они находятся на объекте request (XHR), а не в объекте response .
Примечание: Если у вас есть проблемы с этим, не стесняйтесь сравнить свой код с готовой версией на GitHub (см. исходник здесь, а также см. это в действии).
Резюме
Это завершает нашу статью по извлечению данных с сервера. К этому моменту вы должны иметь представление о том, как начать работать как с XHR, так и с Fetch.
Смотрите также
Однако в этой статье обсуждается много разных тем, которые только поцарапали поверхность. Для получения более подробной информации по этим темам, попробуйте следующие статьи:
- Введение в Ajax (en-US)
- Применение Fetch
- Promises
- Работа с JSON данными
- Обзор HTTP
- Программирование веб-сайта на стороне сервера
- Назад
- Обзор: Client-side web APIs
- Далее
В этом модуле
- Введение в web API
- Манипулирование документами
- Получение данных с сервера
- Сторонние API
- Рисование графики (en-US)
- Видео и аудио API (en-US)
- Клиентское хранилище
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Руководство по использованию API для извлечения данных
API (т. е. интерфейс прикладного программирования) — это стандартизированный и безопасный интерфейс, который позволяет приложениям взаимодействовать и работать друг с другом. Этот тип интерфейса API специально создан для поиска и обновления информации без необходимости ручного вмешательства пользователя. Следующий вопрос — как использовать API для получения данных, и в этом блоге мы обсудим это подробно.
Чтобы помочь вам понять концепцию API, давайте рассмотрим пример: допустим, вы хотите интегрировать статистику глобальной пандемии в свою систему и отображать ее на информационной панели в режиме реального времени. Первым шагом будет поиск поставщика, который хранит такую информацию. Но вторым и более сложным шагом будет автоматическое получение этой статистики от этого поставщика. Здесь API играет жизненно важную роль. Это позволяет вам запросить данные из сторонние поставщиком данных, чтобы вы могли использовать эту информацию по мере необходимости.
API-интерфейсы имеют различные стили архитектуры, но наиболее часто используемая архитектура API — это ОТДЫХ . Сокращенно от REpresentational State Transfer, REST определяет, как приложения могут взаимодействовать через HTTP для эффективной и быстрой передачи информации. При использовании RESTful API приложения слабо связаны, а это означает, что каждое приложение не знает об определениях и форматах данных другого приложения.
Четыре распространенных метода (или действия) HTTP, которые поддерживают RESTful API, включают:
- ПОЛУЧИТЬ: Используется для запроса данных с сервера (например, получения данных о клиенте).
- ПОСЛЕ: Используется для отправки данных от клиента на сервер (например, для добавления нового клиента)
- ПОЛОЖИЛ: Используется для обновления существующей информации на сервере.
- УДАЛЯТЬ: Используется для удаления информации на сервере
Вы можете комбинировать эти действия с конечными точками API для получения, поиска или обновления информации, доступной в различных приложениях. Однако следует отметить одну важную вещь: хотя эти действия являются стандартными, они имеют разные области применения для каждого API, поскольку реализация варьируется от одного приложения к другому.
Как использовать общедоступные API
Публичные (или открытые) API — это сторонние интерфейсы, доступные для внешнего использования. Поставщик данных или организация могут сделать некоторые или все свои данные доступными через API для публичного использования. Публичные API предоставляют компаниям прекрасную возможность расширить свои наборы данных и взглянуть на свои внутренние данные с новой точки зрения. Поскольку API-интерфейсы могут получать информацию, вы можете использовать их для автоматического получения и интеграции внешних данных с вашей внутренней базой данных в режиме реального времени.
Давайте возьмем пример для дальнейшей иллюстрации. Twitter предоставляет общедоступные API, которые позволяют искать и извлекать информацию из огромных архивов социальной сети. Вы можете использовать эти API для поиска старых твитов, публикации новых твитов, анализа тенденций и выполнения многих других действий. Если вы хотите запустить автоматизированную кампанию на основе тенденций в Твиттере, вы можете добиться этого, создав веб-перехватчики или написав код, использующий данные из API.
Аналогичным образом, если вы хотите добавить интерес клиентов к вашим продуктам в обзор эффективности вашей маркетинговой команды, вы можете быстро добиться этого, получив эту информацию через эти API.
Короче говоря, общедоступные API предоставляют вам новые источники информации, но получают доступ к сторонним источникам. Самое приятное то, что большинство общедоступных API бесплатны, и к ним можно получить прямой доступ без какой-либо подписки или оплаты.
Получение данных из REST API
Пользователи могут подключаться к источникам REST API используя мастер подключения к данным.
Разработчики могут настроить подключения REST API в таблице xls.objects или представлениях списков запросов, чтобы предоставить пользователям возможность подключения без дополнительных шагов по настройке.
Пользователи в этом случае должны подключаться к базе данных, а не напрямую к сервису.
Ниже приведен формат настройки для таблицы xls.objects:
ID TABLE_SCHEMA TABLE_NAME TABLE_TYPE TABLE_CODE INSERT_OBJECT UPDATE_OBJECT DELETE_OBJECT HTTP Ниже приведен формат настройки для представления списка запросов:
ID TABLE_SCHEMA TABLE_NAME TABLE_TYPE TABLE_CODE INSERT_PROCEDURE UPDATE_PROCEDURE DELETE_PROCEDURE PROCEDURE_TYPE HTTP В таблицы приведен пример настройки для ZohoCRM:
ID TABLE_SCHEMA TABLE_NAME TABLE_TYPE TABLE_CODE INSERT_OBJECT UPDATE_OBJECT DELETE_OBJECT ZohoCRM Accounts HTTP https://www.zohoapis.com/crm/v2/Accounts ZohoCRM Contacts HTTP https://www.zohoapis.com/crm/v2/Contacts ZohoCRM Leads HTTP https://www.zohoapis.com/crm/v2/Leads Пример содержит три настроенных объекта в схеме ZohoCRM: Accounts, Contacts, and Leads.
Поле TABLE_CODE содержит URL для загрузки данных.
Другие поля могут содержать форматы команд REST API для добавления, изменения и удаления данных. См. Сохранение данных по REST API.
Объекты REST API имеют тип HTTP, как и объекты получения данных из веб.
Однако, следует иметь ввиду несколько важных различий:
- REST API возвращает типизированный JSON или XML, тогда как для объектов веб обычно требуется специфическое извлечение данных.
- REST API поддерживает сохранение изменений.
- REST API обычно требует аутентификацию пользователя.
- REST API может поддерживать постраничную выдачу данных.
- REST API может поддерживать операции SELECT, WHERE, GROUP BY и ORDER BY на уровне сервиса.
Для обработки типизированных данных, надстройка использует специальный парсер. Для его использования добавьте параметр парсера ApiResult=true.
https://www.zohoapis.com/crm/v2/Contacts;ApiResult=true
Чтобы узнать, как настроить сохранение изменений, см. Сохранение данных по REST API.
Чтобы узнать больше об аутентификации, см. HTTP-аутентификация.
Чтобы загрузить все страницы данных, используйте специальную вставку как значение параметра страницы. Надстройка будет автоматически увеличивать номер страницы и делать новый запрос, если данные текущей страницы получены.
https://www.zohoapis.com/crm/v2/Contacts?page=;ApiResult=true
В URL можно добавить любые другие параметры, которые поддерживаются API сервиса.
SaveToDB 10 позволяет настроить колонки, которые определены для API, в таблице xls.columns.
В этом случае, надстройка будет позволять пользователям выбирать колонки для вывода в мастере подключения.
Например, если пользователь выберет поля ID, First_Name и Last_Name, то надстройка сгенерирует команду
SELECT ID, First_Name, Last_Name FROM [https://www.zohoapis.com/crm/v2/Contacts?page=;ApiResult=true]
В этом случае будут загружены все данные, однако в Excel будут вставлены только выбранные колонки.
В URL можно использовать вставку , чтобы передать список выбранных полей.
https://www.zohoapis.com/crm/v2/Contacts?fields=&page=;ApiResult=true
В приведенном примере, надстройка сгенерирует команду:
SELECT ID, First_Name, Last_Name FROM [https://www.zohoapis.com/crm/v2/Contacts?fields=ID,First_Name,Last_Name&page=;ApiResult=true]
В результате сервис вернет только те поля, которые требуются, с экономией трафика и времени.
Если пользователь выберет все колонки, то надстройка удалит параметр списка полей, и команда будет выглядеть как
https://www.zohoapis.com/crm/v2/Contacts?page=;ApiResult=true
- xls.objects
- xls.columns
- Получение данных из веб
- Сохранение данных по REST API
- HTTP-аутентификация
- HTTP-команды
Получение данных по OData
Получение данных из ODataDBЭтот веб-сайт использует куки. Продолжая использовать веб-сайт, Вы принимаете условия Политики защиты персональных данных .
Используем axios для доступа к API
Неоднократно при создании веб-приложения вам может понадобиться получать и отображать данные из API. Существует несколько способов сделать это, но наиболее популярным решением является использование axios, основанного на Promise HTTP-клиента.
В этом упражнении мы будем использовать CoinDesk API для отображения цен на Биткойн, обновляемых каждую минуту. Прежде всего, подключим axios с помощью npm, yarn или ссылки на CDN.
Существует множество вариантов, как мы можем запрашивать информацию из API, но прежде необходимо узнать, в каком виде предоставляются данные, чтобы понимать, как их отображать. Для этого сделаем запрос к конечной точке (endpoint) API и выведем результат. Как можно убедиться из документации API CoinDesk, для получения данных мы будем делать запрос на https://api.coindesk.com/v1/bpi/currentprice.json . Изначально необходимо создать свойство в data для хранения нашей информации, далее извлечём и сохраним данные, используя хук жизненного цикла mounted .
new Vue({
el: '#app',
data( ) {
return {
info: null
};
},
mounted( ) {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response));
}
});div id="app">
{{ info }}
div>И вот что мы получаем:
Отлично! Мы получили какие-то данные. Но сейчас они выглядят достаточно грязно, так что давайте отобразим их должным образом и добавим обработку ошибок на случай, если что-то пойдёт не так, либо когда для получения информации потребовалось больше времени.
Пример из жизни: работа с данными
Отображение данных из API
Типичная ситуация, когда необходимая информация находится внутри ответа сервера и нам необходимо знать структуру данных для получения доступа. В нашем случае, нужная информация о цене находится в response.data.bpi . Если мы используем это, то запрос будет выглядеть следующим образом.
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response.data.bpi));Такие данные намного проще отображать, так что мы можем сейчас обновить HTML-разметку для отображения только нужной информации из полученных данных. Создадим фильтр, чтобы десятичные значения всегда отображались как нужно.
div id="app">
h1>Bitcoin Price Index h1>
div
v-for="currency in info"
class="currency"
>
{{ currency.description }}:
span class="lighten">
span v-html="currency.symbol"> span>{ currency.rate_float }
span>
div>
div>filters: {
currencydecimal (value) {
return value.toFixed(2)
}
}Обработка ошибок
Бывают моменты, когда мы не получили необходимые данные из API. Может быть множество причин, из-за которых вызов axios мог закончиться неудачей, например:
- API не был доступен.
- Запрос был сделан неправильно.
- API не предоставил данные в ожидаемом нами формате.
При выполнении этого запроса мы должны проверять такие обстоятельства и предоставлять информацию в каждом случае, чтобы мы знали, как справиться с этой проблемой. В вызове axios мы сделаем это, используя catch .
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response.data.bpi))
.catch(error => console.log(error));Так мы узнаем, если что-то пойдёт не так во время запроса к API. Но что если данные повреждены или API не был доступен? Сейчас пользователь просто ничего не увидит. Мы могли бы использовать индикатор загрузки для этого случая и сообщать пользователю, что не можем получить данные.
new Vue({
el: '#app',
data( ) {
return {
info: null,
loading: true,
errored: false
};
},
filters: {
currencydecimal(value) {
return value.toFixed(2);
}
},
mounted( ) {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
this.info = response.data.bpi;
})
.catch(error => {
console.log(error);
this.errored = true;
})
.finally(() => (this.loading = false));
}
});div id="app">
h1>Bitcoin Price Index h1>
section v-if="errored">
p>We're sorry, we're not able to retrieve this information at the moment, please try back later p>
section>
section v-else>
div v-if="loading">Loading. div>
div
v-else
v-for="currency in info"
class="currency"
>
{{ currency.description }}:
span class="lighten">
span v-html="currency.symbol"> span>{ currency.rate_float }
span>
div>
section>
div>Вы можете нажимать на кнопку перезапуска (находится в правом нижнем углу во вкладке Result), чтобы увидеть индикатор загрузки во время получения данных из API.
В дальнейшем код можно улучшить с помощью компонентов для различных секций и более детальными отчётами об ошибках. Это зависит от используемого API и сложности вашего приложения.
Альтернативы
Fetch API
Fetch API — мощный нативный API для создания запросов. Может вы слышали, что одно из преимуществ Fetch API в том, что не нужно загружать внешние зависимости для его использования, что является правдой! Однако… он ещё не полностью поддерживается браузерами, поэтому всё равно необходимо использовать полифил. Есть подводные камни при работе с его API, поэтому многие сейчас предпочитают axios. В будущем это может измениться.
Если вы заинтересовались Fetch API — существуют очень хорошие статьи, где объясняются тонкости его использования.
Итоги
Существует множество способов работы с Vue и axios, выходящие за рамки получения и отображения данных из API. Вы можете также взаимодействовать с бессерверными функциями (Serverless Functions), публикацией/редактированием/удалением через API, к которому вы имеете доступ, и т.д. Простая интеграция этих двух библиотек сделала axios очень распространённым выбором среди разработчиков, которым необходимо интегрировать HTTP-клиенты в их приложения.
Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .