Response: phương thức json()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
Note: This feature is available in Web Workers.
Phương thức json() của giao diện Response nhận một luồng Response và đọc nó đến hết. Phương thức này trả về một promise giải quyết với kết quả phân tích văn bản thân phản hồi dưới dạng JSON.
Lưu ý rằng dù phương thức có tên json(), kết quả không phải JSON mà là kết quả của việc lấy JSON làm đầu vào và phân tích nó để tạo ra một object JavaScript.
Cú pháp
json()
Tham số
Không có.
Giá trị trả về
Một Promise giải quyết thành một object JavaScript. Object này có thể là bất kỳ thứ gì có thể được biểu diễn bằng JSON, như object, array, string, number.
Ngoại lệ
AbortErrorDOMException-
Yêu cầu đã bị hủy.
TypeError-
Ném ra vì một trong các lý do sau:
- Body phản hồi bị disturbed hoặc locked.
- Có lỗi giải mã nội dung body, ví dụ do header
Content-Encodingkhông đúng.
SyntaxError-
Body phản hồi không thể được phân tích thành JSON.
Ví dụ
Trong ví dụ fetch JSON của chúng tôi (chạy trực tiếp), chúng ta tạo một yêu cầu mới bằng constructor Request(), rồi dùng nó để fetch một file .json.
Khi fetch thành công, chúng ta đọc và phân tích dữ liệu bằng json(), rồi lấy các giá trị từ object kết quả như mong đợi và chèn chúng vào các mục danh sách để hiển thị dữ liệu sản phẩm.
const myList = document.querySelector("ul");
const myRequest = new Request("products.json");
fetch(myRequest)
.then((response) => response.json())
.then((data) => {
for (const product of data.products) {
const listItem = document.createElement("li");
listItem.appendChild(document.createElement("strong")).textContent =
product.Name;
listItem.append(` can be found in ${product.Location}. Cost: `);
listItem.appendChild(document.createElement("strong")).textContent =
`£${product.Price}`;
myList.appendChild(listItem);
}
})
.catch(console.error);
Thông số kỹ thuật
| Specification |
|---|
| Fetch # ref-for-dom-body-json① |