Что такое API? API означает интерфейс прикладного программирования и, проще говоря, позволяет вашему приложению работать с другими приложениями, обычно в форме JSON
данных.
Использование API Википедии
Допустим, вы хотите, чтобы ваше веб-приложение извлекало данные из такого источника, как Википедия. С помощью API мы можем программно извлекать информацию прямо из Википедии и форматировать ее так, чтобы она идеально соответствовала нашему проекту, приложению или веб-сайту — отображая только ту информацию, которая нам нужна.
Во-первых, давайте настроим конечную точку API Википедии.
Вау, вау, вау. Замедлять! Что такое конечная точка API? Я так рада, что вы спросили! Конечная точка API — это, по сути, адрес конкретных данных, которые нам нужны. Итак, Википедия, будучи великой организацией, выпустила свой API в открытый доступ, и такие люди, как мы, могут запрашивать данные из разных конечных точек.
Для этого примера мы возьмем статьи из Википедии о патриотах Новой Англии.
Вот как выглядит наша конечная точка:
https://en.wikipedia.org/w/api.php?action=query&origin=*&format=json&generator=search&gsrnamespace=0&gsrlimit=5&gsrsearch='New_England_Patriots'
Не беспокойтесь слишком сильно о деталях и внутренней работе приведенного выше URL-адреса прямо сейчас. Нажмите здесь, чтобы увидеть, как на самом деле выглядит наша конечная точка.
Вы должны увидеть что-то вроде этого:
🔥 СОВЕТ: Загрузите расширение браузера для просмотра JSON.
В частности, я использую расширение для браузера Chrome, которое берет этот уродливый беспорядок JSON 👆 и делает его намного лучше 👇:
Чтобы узнать больше о создании конечной точки API Википедии, посетите документацию по API Википедии: https://www.mediawiki.org/wiki/API:Query.
Далее нам нужно настроить подключение к серверу Википедии.
Есть несколько способов сделать это. В этом примере мы будем использовать XMLHttpRequest
, который, несмотря на название, может использоваться не только для XML-данных. XMLHttpRequest
позволяют получать данные с сервера без необходимости обновления страницы, и они очень популярны в ajax (асинхронном) программировании.
Создайте метод HTTP-запроса
var xhr = new XMLHttpRequest();
Создайте переменную для нашей конечной точки API Википедии.
Обязательно включите параметр &origin=*
в свою конечную точку, чтобы предотвратить любые проблемы с CORS.
var url = "https://en.wikipedia.org/w/api.php?action=query&origin=*&format=json&generator=search&gsrnamespace=0&gsrlimit=5&gsrsearch='New_England_Patriots'";
Открываем наше соединение с сервером
В этом случае мы будем использовать метод HTTP GET
, так как мы получаем данные, а не публикуем или удаляем среди других HTTP-методов. Затем Уилл передаст нашу переменную url
, в которой хранится наша конечная точка. Наконец, мы установим параметр асинхронный для нашего запроса на true
.
// Open a new connection, using the GET request on the URL endpoint // Providing 3 arguments (GET/POST, The URL, Async True/False) xhr.open('GET', url, true);
Как только мы получили наш XML-запрос, преобразуем его в JSON.
Нотация объектов JavaScript, или сокращенно JSON
, — это действительно удобный способ отправки, получения и доступа к сложным объектам данных.
Узнайте больше о JSON здесь, в Mozilla Developer Network
// Once request has loaded... xhr.onload = function() {
// Parse the request into JSON var data = JSON.parse(this.response);
// Log the data object console.log(data);
// Log the page objects console.log(data.query.pages)
// Loop through the data object // Pulling out the titles of each page for (var i in data.query.pages) { console.log(data.query.pages[i].title); } }
Отправить ответ HTTP асинхронно
Мы асинхронно отправим наш запрос на сервер API Википедии, чтобы любой код ниже запроса мог продолжать работать, в то время как запрос обрабатывается в фоновом режиме.
// Send request to the server
xhr.send();
Вообще говоря, при работе с вызовами API асинхронные запросы являются предпочтительным методом.
Синхронные запросы блокируют выполнение кода, который приводит к зависанию экрана и не отвечает на запросы пользователей.
Полную статью MDN читайте здесь.
Весь фрагмент кода
Вот, собственно, и все! 👏👏👏 Если все работает правильно, наше приложение должно вывести в нашу консоль браузера 5 заголовков статей из Википедии о патриотах Новой Англии. Попробуйте повозиться с частью New_England_Patriots
конечной точки API и посмотрите, что получится. Вы также можете попробовать динамически изменить эту часть конечной точки, чтобы заполнить то, что пользователь вводит в поле ввода, если вы чувствуете себя смелым.
//Create a new object to interact with the server var xhr = new XMLHttpRequest();
// Set the url for our API endpoint var url = "https://en.wikipedia.org/w/api.php?action=query&origin=*&format=json&generator=search&gsrnamespace=0&gsrlimit=5&gsrsearch='New_England_Patriots'";
// Provide 3 arguments (GET/POST, The URL, Async True/False) xhr.open('GET', url, true);
// Once request has loaded... xhr.onload = function() { // Parse the request into JSON var data = JSON.parse(this.response); // Log the data object console.log(data); // Log the page objects console.log(data.query.pages) // Loop through the data object // Pulling out the titles of each page for (var i in data.query.pages) { console.log(data.query.pages[i].title); } }
// Send request to the server asynchronously xhr.send();
Попробуйте этот код в консоли браузера.
Ознакомьтесь с проектом My Wikipedia API Здесь
Надеюсь, вы нашли это полезным руководством по использованию API Википедии! Нажмите здесь, чтобы увидеть, как я использовал API Википедии, или нажмите здесь, чтобы просмотреть другие мои работы! 👨💻
Пишите мне по адресу [email protected]
с любыми вопросами, и если вам понравилось, следите за обновлениями и подпишитесь ниже! 👇
Первоначально опубликовано на codesnippet.io 18 июня 2018 г.