Что такое Web API в браузере?

Вопрос

Что такое Web API и чем они отличаются от самого языка JavaScript?

Короткий ответ

Web API — это набор интерфейсов, которые предоставляет браузер (а не сам движок JavaScript), позволяющих коду взаимодействовать с DOM, сетью, хранилищем, графикой и другими возможностями окружения.

Подробный ответ

Ключевая идея: сам по себе JavaScript (спецификация ECMAScript) не знает ни про document, ни про fetch, ни про window — это всё предоставляет среда выполнения (браузер или Node.js), а не язык. Именно поэтому один и тот же JS-код может работать в браузере, но упасть в Node.js без window, и наоборот.

Самые используемые Web API:

• DOM API — изменение структуры, содержимого и стилей страницы (document.querySelector, element.classList, ...).
• Fetch API — сетевые запросы, современная замена XMLHttpRequest.
• Web Storage API — localStorage/sessionStorage для хранения данных на клиенте.
• Web Audio API — генерация и обработка звука.
• Canvas API — программная отрисовка графики.
• Geolocation API — получение координат пользователя.

Это важно для SSR-фреймворков вроде Nuxt: код, использующий Web API, нельзя безопасно выполнять на сервере, где window/document не существуют.

Пример

// DOM API
document.querySelector('.card').classList.add('active')

// Fetch API
const response = await fetch('/api/users')
const users = await response.json()

// Web Storage API
localStorage.setItem('theme', 'dark')
const theme = localStorage.getItem('theme')

// Geolocation API
navigator.geolocation.getCurrentPosition((position) => {
  console.log(position.coords.latitude, position.coords.longitude)
})

Дополнительные вопросы

• Почему localStorage недоступен во время SSR-рендера в Nuxt?
• Чем fetch принципиально отличается от XMLHttpRequest?
• Какие Web API безопасно использовать только внутри onMounted/<ClientOnly>?