Привет! Меня зовут Кэлвин Робертс, и я примерно через 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.