JavaScript đọc tệp JSON từ URL

Ký hiệu đối tượng JavaScript (JSON) là định dạng văn bản độc lập với ngôn ngữ để lưu trữ và trao đổi dữ liệu. Các ứng dụng web sử dụng JSON để trao đổi dữ liệu giữa trình duyệt web và máy chủ và trao đổi dữ liệu giữa các máy chủ thông qua API REST. Đối với nhiều ngôn ngữ lập trình, bao gồm JavaScript, Java, C ++, C #, Go, PHP và Python, có sẵn các thư viện mã để tạo và thao tác dữ liệu JSON. Tên tệp JSON sử dụng. phần mở rộng tệp json

Ví dụ JSON

{
  "Id": 78912,
  "Customer": "Jason Sweet",
  "Quantity": 1,
  "Price": 18.00
}

Tìm nạp API là gì?

Fetch API trình bày một phương thức tìm nạp () toàn cầu mới, cho phép các yêu cầu mạng được thực hiện tương tự như phương thức XMLHttpRequest (XHR) nhưng mạnh mẽ và linh hoạt hơn. Fetch API là giải pháp thay thế tốt hơn cho XMLHttpRequest và có thể dễ dàng tích hợp với các công nghệ khác, chẳng hạn như Service Worker. Sự khác biệt chính giữa Fetch API và XMLHttpRequest là Fetch sử dụng các lời hứa, cho phép bạn có một API đơn giản và rõ ràng hơn mà không cần gọi lại lồng nhau

Ví dụ JSON tìm nạp JavaScript

Dưới đây là ví dụ về việc nhận JSON từ URL echo ReqBin bằng Fetch API

Ví dụ JSON tìm nạp JavaScript

fetch('https://reqbin.com/echo/get/json')
   .then(response => response.text())
   .then(text => console.log(text))
  
// output: {"success":"true"}

Phản hồi. phương thức text() không tự động phân tích nội dung phản hồi và phân giải thành một chuỗi. Để tự động phân tích phản hồi JSON thành đối tượng JavaScript, bạn cần sử dụng phản hồi. phương thức json()

Làm cách nào để tìm nạp dữ liệu JSON trong JavaScript?

Để nhận dữ liệu JSON từ điểm cuối API, trước tiên bạn phải gọi phương thức tìm nạp () rồi trả lời. json(). Phương thức fetch() trả về một Lời hứa đại diện cho phản hồi của máy chủ và phản hồi. json() giải quyết kết quả phân tích cú pháp phản hồi JSON thành một đối tượng JavaScript

JavaScript Tìm nạp dữ liệu JSON bằng Ví dụ về API Tìm nạp

fetch('https://reqbin.com/echo/get/json')
   .then(response => response.json())
   .then(json => console.log(json))
  
// output: {"success":"true"}

Làm cách nào để ĐĂNG dữ liệu JSON bằng API Tìm nạp?

Để đăng dữ liệu JSON lên máy chủ bằng API tìm nạp, bạn cần yêu cầu tìm nạp() sử dụng phương thức POST và chuyển dữ liệu JSON vào tham số "body". Loại nội dung. Tiêu đề HTTP 'application/json' là cần thiết để máy chủ nhận và diễn giải chính xác dữ liệu JSON trong phần nội dung của thông báo HTTP

JavaScript POST JSON với Fetch API Ví dụ

fetch('https://reqbin.com/echo/post/json', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({"id": 1})
})
   .then(response => console.log(response.status))
  
// output: 200

Làm cách nào để tìm nạp dữ liệu JSON bằng phương thức HTTP POST?

Để tìm nạp dữ liệu JSON từ máy chủ bằng phương thức HTTP POST, bạn cần yêu cầu hàm tìm nạp () thực hiện yêu cầu POST bằng cách chuyển "phương thức. 'BƯU KIỆN'"

JavaScript Tìm nạp JSON với HTTP POST Ví dụ

fetch('https://reqbin.com/echo/post/json', {
    method: 'POST'
})
   .then(response => response.json())
   .then(json => console.log(json))
  
// output: {"success":"true"}

Làm cách nào để tìm nạp JSON bằng JavaScript không đồng bộ và đang chờ toán tử?

Để tìm nạp dữ liệu JSON bằng cách sử dụng toán tử không đồng bộ và chờ đợi của JavaScript, trước tiên bạn phải gọi chờ đợi tìm nạp() để phân giải nó thành một đối tượng Phản hồi và sau đó gọi chờ phản hồi. json() để giải quyết nó thành một đối tượng JSON được phân tích cú pháp

JavaScript Tìm nạp JSON bằng cách sử dụng async và chờ đợi

const response = await fetch('https://reqbin.com/echo/get/json');

const obj = await response.json();

console.log(obj);
  
// output: {"success":"true"}

Xem thêm

• Làm cách nào để tạo chuỗi JSON trong JavaScript?
• Làm cách nào để phân tích cú pháp JSON trong Javascript?
• Làm cách nào để chuyển đổi một mảng JavaScript thành JSON?
• Làm cách nào để sử dụng phân trang JSON?
• Làm cách nào để tôi in JSON đẹp trong JavaScript?

Javascript Tìm nạp JSON Các ví dụ và bài viết về API có liên quan

Làm cách nào để gửi yêu cầu POST bằng JavaScript?

Làm cách nào để đọc tệp JSON từ một URL trong JavaScript?

Làm cách nào để đọc dữ liệu JSON từ URL?

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

Làm cách nào để tải xuống dữ liệu JSON từ URL?