доступно. ключевые слова: docType:Блог,категория:Baseline2025,язык:JavaScript
Опубликовано: 18 июня 2025 г.
Если вы хотите импортировать файл JSON в модуль JavaScript, вам раньше приходилось проходить через такие препятствия, как встраивание JSON в JavaScript, чтобы вы могли использовать обычный оператор import , или загрузка файла с помощью fetch() и затем вызов Response.json() . Это проблема, которая теперь решена во всех современных браузерах благодаря скриптам модуля JSON и атрибутам импорта .
В следующем примере показано, как скрипт модуля JSON можно импортировать из скрипта модуля JavaScript:
import astronomyPictureOfTheDay from "./apod.json" with { type: "json" };
const {explanation, title, url} = astronomyPictureOfTheDay;
document.querySelector('h2').textContent = title;
document.querySelector('figcaption').textContent = explanation;
Object.assign(document.querySelector('img'), { src: url, alt: title });
JSON.parse() не нужен, JSON анализируется и готов к использованию сразу после import . Это работает, потому что браузер заранее знает, что имеет дело с JSON, который вы объявляете с помощью атрибута import with { type: "json" } .
Ознакомьтесь с этой интерактивной демонстрацией импорта модуля JSON , в которой используется код из предыдущего листинга.
Проверка типа MIME для скриптов модуля строгая. Для успешного извлечения скрипта модуля JSON ответ HTTP должен иметь тип MIME JSON, например Content-Type: text/json .
Если часть оператора with { type: "json" } пропущена, браузер предполагает, что целью является импорт скрипта модуля JavaScript, и извлечение завершится ошибкой, если ответ HTTP имеет тип MIME, который не является типом MIME JavaScript.
Подробнее об обработке скриптов модуля JSON можно прочитать в спецификации HTML.