Что такое api javascript

Client-side web APIs

When writing client-side JavaScript for websites or applications, you will quickly encounter Application Programming Interfaces (APIs). APIs are programming features for manipulating different aspects of the browser and operating system the site is running on, or manipulating data from other websites or services. In this module, we will explore what APIs are, and how to use some of the most common APIs you’ll come across often in your development work.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Prerequisites

To get the most out of this module, you should have worked your way through the previous JavaScript modules in the series (First steps, Building blocks, and JavaScript objects). Those modules typically involve simple API usage, as it is often difficult to write client-side JavaScript examples without them. For this tutorial, we will assume that you are knowledgeable about the core JavaScript language, and we will explore common Web APIs in a bit more detail.

Basic knowledge of HTML and CSS would also be useful.

Note: If you are working on a device where you don’t have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

Guides

First up, we’ll start by looking at APIs from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? We’ll also take a look at what the different main classes of APIs are, and what kind of uses they have.

When writing web pages and apps, one of the most common things you’ll want to do is manipulate web documents in some way. This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes heavy use of the Document object. In this article, we’ll look at how to use the DOM in detail, along with some other interesting APIs that can alter your environment in interesting ways.

Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entirely new page. This seemingly small detail has had a huge impact on the performance and behavior of sites. In this article, we’ll explain the concept, and look at technologies that make it possible, such as XMLHttpRequest and the Fetch API.

The APIs we’ve covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter.

The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (SVG) language, to APIs for drawing on HTML elements, (see The Canvas API and WebGL). This article provides an introduction to the Canvas API, and further resources to allow you to learn more.

Modern web browsers feature a number of different technologies that allow you to store data related to websites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. This article explains the very basics of how these work.

Found a content problem with this page?

This page was last modified on Jul 3, 2023 by MDN contributors.

Источник

JavaScript: Что такое API и как с ним работать

Рассмотрим что такое API и зачем он нужен на примере небольшого магазина. По шагам напишем сценарий получающий данные из реального API и обрабатывающий их.

Что такое API

Представьте, что вы владелец небольшого продуктового магазина. Вы ведёте учёт своих запасов с помощью ручки и бумаги, но заметили, что управлять им становиться всё труднее. У вас часто заканчиваются популярные товары, и вам приходится отказывать покупателям, или в итоге вы получаете слишком много определённых товаров, которые не продаются быстро. Вы знаете, что существуют программные решения, которые могут помочь лучше справляться с запасами, но вы не знаете с чего начать.

Однажды вы болтаете с другом, который работает в индустрии программного обеспечения. Он предлагает изучить использование API для подключения вашей системы управления запасами к программному решению, которое может помочь автоматизировать отслеживание запасов. Сначала вы не знаете, что такое API и как оно может вам помочь. Но, когда ваш друг объясняет, вы начинаете видеть потенциал.

Application Programming Interface или Интерфейс Прикладного Программирования — способ взаимодействия двух программных приложений друг с другом. API-интерфейсы позволяют вам получать доступ к данным или функциям из другого приложения и использовать их в своём приложении. В данном случае вы можете использовать API для подключения системы управления запасами к программному решению, которое поможет более эффективно отслеживать запасы.

Ваш друг предлагает изучить популярное программное обеспечение для управления запасами, которое предлагает API. Проведя некоторое исследование, вы обнаруживаете, что программное обеспечение предлагает API, который позволяет получать данные о запасах, добавлять новые товары и обновлять существующие. Вы решаете внедрить API в свою систему управления запасами.

Используя API, вы можете автоматизировать многие задачи, которые раньше требовали ручного ввода. Вы можете быстро увидеть, какие товары заканчиваются, и заказать больше, прежде чем они закончатся. И вы можете отслеживать популярность различных товаров, чтобы принимать более обоснованные решения о покупке. В целом, использование API помогло сэкономить время и деньги, а также упростило ведение малого бизнеса.

Итак, это краткий рассказ об API и о том, как его можно использовать в реальных сценариях. В данном случае API позволил владельцу небольшого продуктового магазина соединить свою систему управления запасами с программным решением, которое помогло бы им более эффективно отслеживать свои запасы. Используя API, они смогли автоматизировать многие задачи, ранее требовавшие ручного ввода, и в процессе сэкономить время и деньги.

С чего начать

Шаг 1: Выбор API

Прежде чем начать работать с API, необходимо выбрать тот, который предоставляет нужные вам данные. Существует множество доступных API, обеспечивающих доступ к широкому спектру данных, включая данные о погоде, курсы акций, новостные статьи и многое другое. Некоторые популярные API включают в себя:

• Twitter API
• Google Maps API
• OpenWeatherMap API
• GitHub API
• Spotify API

У каждого API есть своя документация, в которой объясняется, как делать запросы и получать ответы. Вам необходимо прочитать эту документацию, чтобы понять, как работать с API.

Шаг 2: Понимание API

Следующий шаг — понять, как использовать API. Документация по API должна объяснять, как делать запросы, какие параметры включать в запросы и как будут выглядеть ответы. Вам нужно знать URL-адрес конечной точки API, метод HTTP ( GET , POST , PUT , DELETE ) для использования и все необходимые параметры и заголовки.

Например, предположим, что вы хотите использовать OpenWeatherMap API для получения текущей погоды в определённом городе. В документации по API указано, что вам необходимо сделать GET запрос на следующий URL: https://api.openweathermap.org/data/2.5/weather?q=&appid= . Вам нужно заменить на название города, для которого вы хотите получить данные о погоде, и на ваш ключ API. В документации API также указано, что ответ будет в формате JSON.

Шаг 3: Делаем HTTP-запрос

В JavaScript вы можете делать HTTP-запросы используя встроенную функцию fetch . Функция fetch возвращает промис, которое разрешает ответ от сервера. Затем вы можете использовать метод json() объекта ответа для анализа ответа как JSON.

fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY') 
.then(response => response.json()) 
.then(data => console.log(data)) 
.catch(error => console.error(error))

Этот код отправляет GET запрос к OpenWeatherMap API для получения текущей погоды в городе Лондон, использую ваш ключ API. Метод then объекта Promise используется для обработки ответа. Первый метод then вызывает response.json() для анализа ответа как JSON, а второй then выводит данные ответа в консоль. Метод catch используется для обработки любых ошибок возникающих во время запроса.

Шаг 4: Обрабатываем ответ

Когда у вас есть данные ответа, нужно извлечь из них соответствующую информацию. В случае с OpenWeatherMap API ответ будет содержать много информации о текущей погоде, включая температуру, влажность, скорость ветра и многое другое. Вам нужно будет проанализировать данные JSON и извлечь нужную информацию.

fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY') 
.then(response => response.json()) 
.then(data =>  
const temperature = data.main.temp; 
const humidity = data.main.humidity; 
const windSpeed = data.wind.speed; 
console.log(`Temperature: $temperature>, Humidity: $humidity>, Wind Speed: $windSpeed>`); 
>) 
.catch(error => console.error(error))

Этот код анализирует данные ответа как JASON и извлекает температуру, влажность и скорость ветра из объектов mine и wind в ответе. Затем выводит эту информацию в консоль.

Шаг 5: Выводим результаты в пользовательский интерфейс

Наконец, когда у вас есть соответствующая информация из ответа API, вы можете использовать её для обновления пользовательского интерфейса вашего приложения или выполнения других задач. Например, вы можете использовать данные о погоде для отображения текущей температуры и погодных условий для местоположения пользователя в вашем приложении.

fetch(`https://api.openweathermap.org/data/2.5/weather?q=$city>&appid=$apiKey>`) 
.then(response => response.json()) 
.then(data =>  
const temperature = data.main.temp; 
const weatherDescription = data.weather[0].description; 
const iconCode = data.weather[0].icon; 
const weatherIconUrl = `http://openweathermap.org/img/w/$iconCode>.png`; 
 
// update UI 
const temperatureElement = document.getElementById('temperature'); 
temperatureElement.innerText = `$temperature>°C`; 
 
const weatherDescriptionElement = document.getElementById('weather-description'); 
weatherDescriptionElement.innerText = weatherDescription; 
 
const weatherIconElement = document.getElementById('weather-icon'); 
weatherIconElement.setAttribute('src', weatherIconUrl); 
>) 
.catch(error => console.error(error))

В этом коде мы используем OpenWeatherMap API для получения данных о погоде для определённого города, а затем извлекаем температуру, описание погоды и иконку погоды из ответа API. Затем мы обновляем пользовательский интерфейс нашего приложения с этой информацией, устанавливая внутренний текст температуры и элементов описания погоды, и устанавливая атрибутом источника иконки погоды URL-адрес иконки погоды.

Это всего лишь один пример того, как вы можете использовать данные API в своём приложении. В зависимости от API и вашего приложения вы можете использовать данные по-разному. Ключевым моментом является понимание структуры ответа API и извлечение соответствующей информации, а затем использование этой информации для обновления пользовательского интерфейса вашего приложения или выполнения других задач.

Здорово, что вы дочитали до конца!! Надеюсь вам понравилось.

Дополнительные материалы

Источник