Scenariusze modułu JSON są teraz dostępne jako nowe wersje podstawowe

dostępne. keywords: docType:Blog,category:Baseline2025,language:JavaScript

Thomas Steiner

Data publikacji: 18 czerwca 2025 r.

Jeśli chcesz zaimportować plik JSON w module JavaScript, wcześniej musiałeś wykonać skomplikowane czynności, takie jak umieszczanie danych JSON w JavaScript, aby móc użyć zwykłego instrukcji import, lub pobieranie pliku za pomocą fetch(), a następnie wywołanie Response.json(). Ten problem został rozwiązany we wszystkich nowoczesnych przeglądarkach dzięki skryptom modułów JSON i atrybutom importu.

Ten przykład pokazuje, jak zaimportować skrypt modułu JSON z poziomu skryptu modułu 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 });

Nie trzeba stosować JSON.parse(), ponieważ dane JSON są analizowane i gotowe do użycia zaraz po import. Działa to, ponieważ przeglądarka wie z wyprzedzeniem, że ma do czynienia z danymi w formacie JSON, które deklarujesz za pomocą atrybutu importu with { type: "json" }.

Obejrzyj to na żywo demo importowania modułów JSON, które korzysta z kodu z poprzedniej listy.

Sprawdzanie typu MIME w przypadku skryptów modułów jest rygorystyczne. Aby pobrać skrypt modułu JSON, odpowiedź HTTP musi mieć typ MIME JSON, np. Content-Type: text/json.

Jeśli pominiesz część with { type: "json" }, przeglądarka uzna, że chcesz zaimportować skrypt modułu JavaScript. Jeśli odpowiedź HTTP ma typ MIME, który nie jest typem MIME JavaScript, pobranie się nie powiedzie.

Więcej informacji o przetwarzaniu skryptów modułów JSON znajdziesz w specyfikacji HTML.