có sẵn. từ khoá: docType:Blog,category:Baseline2025,language:JavaScript
Ngày xuất bản: 18 tháng 6 năm 2025
Nếu muốn nhập tệp JSON trong mô-đun JavaScript, trước đây, bạn phải thực hiện các bước như nhúng JSON vào JavaScript để có thể sử dụng câu lệnh import thông thường hoặc tải tệp xuống bằng fetch() rồi gọi Response.json(). Đây là vấn đề hiện đã được giải quyết trong tất cả các trình duyệt hiện đại nhờ tập lệnh mô-đun JSON và thuộc tính nhập.
Mẫu sau đây cho thấy cách nhập tập lệnh mô-đun JSON từ bên trong tập lệnh mô-đun 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 });
Không cần JSON.parse(), JSON được phân tích cú pháp và sẵn sàng hoạt động ngay sau import. Điều này hoạt động vì trình duyệt biết trước rằng trình duyệt đang xử lý
JSON mà bạn khai báo bằng thuộc tính nhập with { type: "json"
}.
Hãy xem minh hoạ trực tiếp về cách nhập mô-đun JSON sử dụng mã từ trang thông tin trước.
Quy trình kiểm tra loại MIME cho tập lệnh mô-đun rất nghiêm ngặt. Để tìm nạp tập lệnh mô-đun JSON thành công, phản hồi HTTP phải có loại MIME JSON, ví dụ: Content-Type: text/json.
Nếu bạn bỏ qua phần with { type: "json" } của câu lệnh, trình duyệt sẽ giả định rằng ý định là nhập tập lệnh mô-đun JavaScript và quá trình tìm nạp sẽ không thành công nếu phản hồi HTTP có loại MIME không phải là loại MIME JavaScript.
Bạn có thể đọc thêm về việc xử lý tập lệnh mô-đun JSON trong thông số kỹ thuật HTML.