Если вы новичок в JavaScript, вы могли видеть или не видеть следующее:

fetch('http://example.com/movies.json')
.then(response =› response.json())
.then(data =› console.log (данные))

Если у вас нет, это базовый код, необходимый для получения из внешнего API. Что?!

API

API — это аббревиатура от Application Programming Interface, программного посредника, который позволяет двум приложениям взаимодействовать друг с другом. (mulesoft.com) По сути, API — это набор данных, хранящихся на сервере, с которого люди обращаются, чтобы получить определенные данные.

Все еще немного запутались? Посмотрите это видео!

HTTP

Теперь, когда вы лучше знакомы с базой данных, из которой вы извлекаете информацию, вы знаете, что у вас есть множество информации, ожидающей вас на другом конце вашей выборки, все, что вам нужно сделать, это произнести их имя, вызвав их HTTP. HTTP — это протокол для получения ресурсов, таких как HTML-документы. Это основа любого обмена данными в Интернете, и это протокол клиент-сервер, что означает, что запросы инициируются получателем, обычно веб-браузером. Полный документ реконструируется из различных извлеченных вложенных документов, например, текста, описания макета, изображений, видео, сценариев и т. д. (разработчик.mozilla.org)

Чтобы узнать больше о HTTP, нажмите здесь.

Как получить

Шаг 1. Подготовьте открытый репозиторий. Я предпочитаю использовать React, если вы тоже это делаете, вот код для создания базового приложения для реагирования.

npx create-react-app my-app
cd my-app
npm start

Шаг 2. После загрузки приложения сотрите ненужный код и откройте вкладку home.js.

Шаг 3. Найдите внешний API, который вы будете использовать. **Многие компании взимают плату за использование своих внешних API, но существует множество бесплатных для использования в Интернете. Для некоторых API также потребуется ключ для авторизации использования, который компания предоставит за определенную плату.** Вот ссылка на список бесплатных API, для которых не требуется ключ.

Шаг 4. После того, как вы выбрали нужный API, вернитесь к Home.js в своем репозитории и вставьте этот код:

fetch('http://example.com/movies.json')
.then(response =› response.json())
.then(data =› console.log (данные));

Замените http://example.com/movies.json на HTTP вашего внешнего. **Обязательно сохраните кавычки**

Шаг 5.Проверьте консоль в браузере, чтобы увидеть, отображаются ли ваши данные. Вы должны увидеть что-то похожее на это.

Если вы видите, что данные появляются в вашей консоли, вы успешно выполнили выборку. Чтобы увидеть данные, отображаемые на вашей странице, потребуется еще несколько шагов, но знайте, что вы уже на полпути. В моем следующем посте мы обсудим рендеринг наших данных, а пока СПАСИБО ЗА ПРОЧТЕНИЕ!