Получаем и обрабатываем JSON с URL в JavaScript

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для получения данных в формате JSON из URL, применяем функцию fetch в сочетании с async/await:

Скопировать код

async function getJSON(url) {
  const response = await fetch(url);
  if (!response.ok) {
     throw new Error("Выявлена ошибка при выполнении сетевого запроса :(");
  }
  return await response.json();
}

// Пример использования функции
(async () => {
  try {
    console.log(await getJSON('https://api.example.com/data'));
  } catch (error) {
    console.error("Ошибка не на вашей стороне. Подробности:", error);
  }
})();

Передайте нужный вам API endpoint в функцию getJSON(). Результат отобразится в консоли. Обработка ошибок осуществляется с помощью try/catch.

Углубите свои навыки

Для того чтобы стать профи в вопросах извлечения JSON, потребуются дополнительные знания. Вот несколько продвинутых методик, которые позволят расширить ваш арсенал инструментов JavaScript:

Техника обработки ошибок "Ниндзя"

Эффективное устранение багов и обработка ошибок. Используйте многоразово применяемые функции с надёжной обработкой ошибок:

Скопировать код

const ninjaFetch = async (url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP ошибка! Статус: ${response.status}`);
    }
    return await response.json(); // Достойно настоящего профессионала преобразуем JSON
  } catch (error) {
    console.error("Увы, возникли сложности при получении данных:", error);
  }
};

// Применим получившееся мастерство ниндзя
ninjaFetch('https://api.example.com/data');

Использование браузеров, предшествующих Fetch API

Обучите старые браузеры использованию Fetch API с помощью полифилла:

Скопировать код

if (!window.fetch) {
  window.fetch = fetchPolyfill; // Теперь старые браузеры знают новые трюки
}

Техники jQuery dojo

Используйте возможности dojo jQuery для извлечения JSON с тем же уровнем профессионализма, что и у мастеров манипуляции катаной:

Скопировать код

$.getJSON('https://api.example.com/data', function(data) {
  console.log(data); // Вот как это делается без магии!
});

Надёжный XMLHttpRequest для обратной совместимости

Если fetch недоступен, надёжный XMLHttpRequest придёт на помощь:

Скопировать код

function getJSONWithXHR(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function () {
    const status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  xhr.send();
}

Визуализирование процесса

Представим процесс получения JSON из URL в JavaScript, как курьерскую доставку данных:

JavaScript (🚚): экспресс-курьер, который надёжно доставляет ваши данные.

Скопировать код

// Размещаем заказ на доставку данных
fetch('https://api.example.com/data.json')
  .then(response => response.json())  // Распаковываем данные
  .then(json => console.log(json));   // JSON в точности поставлен в консоль

Статус доставки данных с помощью промисов отслеживается, как отслеживание посылки службой доставки:

Markdown

Скопировать код

Статус промиса:  🟨 Ожидание -> 🟩 Выполнен (JSON доставлен!)
                                 или 🔴 Отклонен (Упс, произошла ошибка!)

Сервис быстрой доставки Node.js

Серверный JavaScript на Node.js работает по аналогичной схеме:

Скопировать код

const fetch = require('node-fetch');

async function getNodeJSON(url) {
  const response = await fetch(url);
  // Оставшаяся часть кода так же надёжна, как ночная доставка пиццы
}

Кросс-доменные запросы, профессионально

При работе с данными из других доменов CORS (Cross-Origin Resource Sharing) необходим как пропускной пункт:

Скопировать код

fetch('https://api.otherdomain.com/data')
  .then(crossBorderResponse)
  .catch(immigrationControl);

Эффективность с функциями-стрелками

Функции-стрелки делают ваш код более продуманным и лаконичным:

Скопировать код

fetch('https://api.example.com/data')
  .then(res => res.json()) // Маршируем функции-стрелки!
  .then(data => console.log(data))
  .catch(error => console.error("Упс, что-то пошло не так:", error));

Повышаем читаемость кода и соблюдаем DRY принцип

Делаем ваш код чистым и понятным:

URL адреса как константы

Сохраните API-адреса в константах для удобства работы с кодом:

Скопировать код

const DATA_URL = 'https://api.example.com/data.json'; // Соблюдаем принцип DRY

Форматирование с Async/Await

Асинхронные функции помогут организовать ваш код:

Скопировать код

async function printJSON(url) {
  try {
    const data = await getJSON(url);
    console.log(data); // Чисто и наглядно
  } catch (error) {
    console.error("Возникли проблемы с кодом! Ошибка:", error);
  }
}

Отладка с console.log

Использование console.log для проверки результатов – это бесценно:

Скопировать код

console.log('Таинственные данные:', data);

Полезные ссылки

Использование Fetch API – Веб-API | MDN — Подробное руководство по использованию Fetch API в JavaScript.
GitHub – axios/axios: Promise based HTTP client for the browser and node.js — Отличная замена Fetch для выполнения HTTP-запросов в JavaScript с использованием промисов.
JSON.parse() – JavaScript | MDN — Конкретика о том, как преобразовать JSON-строку в объекты JavaScript.
Async/await — Разгадайте тайны async/await в JavaScript.
Cross-Origin Resource Sharing (CORS) – HTTP | MDN — Превращайте сложности обращения с CORS в победы при выполнении кросс-доменных запросов.