Что такое 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 г.