Làm cách nào để đọc tệp JavaScript?

Khi tìm nạp dữ liệu từ các nguồn hoặc máy chủ bên ngoài, bạn cần đảm bảo rằng dữ liệu trả về ở định dạng JSON. Sau đó, bạn có thể sử dụng dữ liệu trong ứng dụng của mình

Trong một số trường hợp, khi bạn đang làm việc cục bộ hoặc khi bạn tải tệp dữ liệu lên máy chủ, chúng tôi có thể muốn đọc những dữ liệu JSON này từ một tệp

Chúng ta sẽ học cách làm điều đó trong hướng dẫn này

Cách đọc tệp JSON trong JavaScript bằng API tìm nạp

Một phương pháp tiêu chuẩn mà chúng tôi có thể sử dụng để đọc tệp JSON (tệp cục bộ hoặc tệp được tải lên máy chủ) là với API tìm nạp. Nó sử dụng cùng một cú pháp cho cả hai. Sự khác biệt duy nhất sẽ là URL

Ví dụ: giả sử chúng tôi có một tệp cục bộ trong thư mục dự án của chúng tôi có tên data.json chứa dữ liệu JSON sau đây

{
    "id": 1,
    "title": "Hello World",
    "completed": false
}

Bây giờ chúng ta có thể đọc tệp này bằng JavaScript bằng phương pháp Fetch API

fetch('./data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

Ở phần trên, chúng tôi đã có thể đọc một tệp JSON cục bộ. Nhưng thật không may, khi chúng tôi chạy cái này trong trình duyệt, chúng tôi có thể gặp lỗi CORS sau vì tệp của chúng tôi không có trên máy chủ

Để khắc phục điều này, chúng tôi sẽ đảm bảo rằng tệp JSON của chúng tôi nằm trên máy chủ cục bộ hoặc máy chủ từ xa. Nếu chúng tôi sử dụng máy chủ Trực tiếp trên IDE của mình, chúng tôi sẽ không gặp phải lỗi này. Nhưng khi chúng tôi tải trực tiếp tệp của mình, chúng tôi sẽ gặp lỗi này

Như tôi đã nói trước đó, giả sử chúng ta có tệp JSON này trên một máy chủ từ xa và đang cố đọc tệp này bằng JavaScript. Cú pháp tương tự sẽ hoạt động

fetch('https://server.com/data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

API tìm nạp là phương pháp thích hợp hơn để sử dụng khi chúng tôi muốn đọc tệp JSON từ máy chủ bên ngoài hoặc tệp cục bộ vào tệp JavaScript của chúng tôi

Cách đọc tệp JSON trong JavaScript với Câu lệnh nhập

Một phương pháp khác mà chúng ta có thể sử dụng ngoài việc thực hiện một yêu cầu HTTP là câu lệnh nhập. Phương pháp này có một vài biến chứng, nhưng chúng tôi sẽ giải quyết tất cả

Giống như trong phần trước, giả sử chúng ta có tệp JSON chứa dữ liệu người dùng, chẳng hạn như user.json

{
    "id": 1,
    "name": "John Doe",
    "age": 12
}

Chúng ta có thể đọc dữ liệu JSON này bằng JavaScript bằng cách sử dụng câu lệnh nhập theo cách này

import data from './data.json';
console.log(data);

Thật không may, điều này sẽ gây ra lỗi cho biết chúng tôi không thể sử dụng câu lệnh nhập bên ngoài mô-đun. Đây là một lỗi cơ bản khi chúng tôi cố gắng sử dụng câu lệnh import trong một tệp JavaScript thông thường, đặc biệt đối với những nhà phát triển mới làm quen với JavaScript

Để khắc phục điều này, chúng tôi có thể thêm thẻ tập lệnh

fetch('./data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

0 vào tệp HTML nơi chúng tôi đã tham chiếu tệp JavaScript, như thế này

    // ...
    
        
    

Khi chúng tôi làm điều này, chúng tôi vẫn gặp lỗi khác

Để khắc phục lỗi này, chúng tôi cần thêm loại tệp JSON vào câu lệnh nhập và sau đó chúng tôi sẽ có thể đọc tệp JSON của mình bằng JavaScript

import data from './data.json' assert { type: 'JSON' };
console.log(data);

Điều này hoạt động hoàn hảo miễn là chúng tôi chạy các tệp của mình trên máy chủ cục bộ hoặc máy chủ từ xa. Nhưng giả sử chúng ta chạy cái này cục bộ - thì chúng ta sẽ gặp lỗi CORS

kết thúc

Trong bài viết này, chúng ta đã học cách đọc tệp JSON trong JavaScript và các lỗi có thể gặp phải khi sử dụng từng phương thức

Tốt nhất là sử dụng phương thức API tìm nạp khi bạn muốn thực hiện một yêu cầu HTTP. Ví dụ: giả sử chúng tôi đang tìm nạp dữ liệu từ tệp JSON giả mà cuối cùng chúng tôi sẽ lấy từ API

Tuy nhiên, trong trường hợp chúng tôi không cần sử dụng yêu cầu HTTP, chúng tôi có thể sử dụng câu lệnh nhập. Chúng ta có thể sử dụng câu lệnh nhập khi chúng ta sử dụng thư viện như React, Vue, v.v. liên quan đến các mô-đun. Điều này có nghĩa là chúng tôi sẽ không cần thêm loại mô-đun và đồng thời, chúng tôi sẽ không cần thêm loại tệp

Cả hai phương pháp đều không yêu cầu bạn cài đặt gói hoặc sử dụng thư viện vì chúng có sẵn. Lựa chọn phương pháp nào để sử dụng là hoàn toàn tùy thuộc vào bạn

Nhưng một mẹo nhanh giúp phân biệt các phương pháp này là API tìm nạp đọc tệp JSON trong JavaScript bằng cách gửi yêu cầu HTTP, trong khi câu lệnh nhập không yêu cầu bất kỳ yêu cầu HTTP nào mà hoạt động giống như mọi lần nhập khác mà chúng tôi thực hiện

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Joel Olawanle

Nhà phát triển Frontend & Người viết kỹ thuật

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Làm cách nào để đọc nội dung tệp trong JavaScript?

Làm cách nào để mở tệp bằng JavaScript?