Привет! Меня зовут Кэлвин Робертс, и я примерно через 2 месяца начинаю свое путешествие по программированию через учебный лагерь Колумбийского университета, поэтому мне очень не терпелось начать исследование серверных API для моего первого совместного проекта Recyculator.
Я никогда раньше не использовал API, поэтому мне было интересно решить эту задачу. Сначала я исследовал множество API, таких как Google News API, News API, Free News API и Mediastack.
Поначалу моим любимым вариантом был Mediastack. У него была бесплатная подписка, и он позволял использовать все нужные мне параметры URL-адреса запроса. Однако с Mediastack API возникла проблема, потому что я неоднократно получал ошибку HTTP.
Я пошел дальше и продолжил поиски, в конце концов выбрав NewsData API, найденный в Rapid API. Он отвечал всем моим требованиям, не возвращал HTTP-ошибку и допускал до 200 вызовов в день. Тогда пришло время проверить это!
Сначала мне нужно было получить ключ API, что стало проще благодаря Rapid API. Все, что мне нужно было сделать, это подписаться на NewsData API, и я получил свой бесплатный ключ API. Следующим шагом было написать мой код!
В JavaScript я создал приведенный ниже запрос на выборку, используя API NewsData:
const url = 'https://newsdata2.p.rapidapi.com/news?language=en&q=sustainability%20AND%20recycling'; const options = { method: 'GET', headers: { 'X-RapidAPI-Key': 'a96648bf97msh07572d567100729p1b9b8cjsn3bc7717c8d90', 'X-RapidAPI-Host': 'newsdata2.p.rapidapi.com' } }; fetch(url, options) .then(function(response){ return response.json() }) .then(function(data){ console.log(data) document.getElementById('story-1').textContent = data.results[1].title document.getElementById('link-1').textContent = data.results[1].link document.getElementById('link-1').href = data.results[1].link document.getElementById('story-2').textContent = data.results[4].title document.getElementById('link-2').textContent = data.results[4].link document.getElementById('link-2').href = data.results[4].link document.getElementById('story-3').textContent = data.results[7].title document.getElementById('link-3').textContent = data.results[7].link document.getElementById('link-3').href = data.results[7].link })
Как видите, требования для того, чтобы это работало, очень просты. Вверху у меня есть константа, объявляющая URL-адрес, который содержит параметры моего запроса и ключ API. Я использовал следующие параметры:
language=en q=sustainability%20AND%20recycling
Это вернуло массив данных, который включал самые последние и актуальные статьи на английском языке и содержал слова «устойчивое развитие» и «переработка».
Моя другая константа объявляет массив объектов. Тип метода (GET) и заголовки, которые являются моим ключом API и хостом.
Затем я передаю эти объявления const в запрос на выборку, который возвращает данные в формате JSON, которые я связал с элементами HTML, которые затем асинхронно отображаются на моей веб-странице.
Я надеюсь, что некоторые могут найти это полезным! Это было очень простое и веселое введение в работу с серверными API.