Response: phương thức bytes()
Baseline
2025
Newly available
Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Note: This feature is available in Web Workers.
Phương thức bytes() 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 một Uint8Array.
Cú pháp
bytes()
Tham số
Không có.
Giá trị trả về
Một promise giải quyết với một Uint8Array.
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.
RangeError-
Ném ra nếu có sự cố khi tạo
ArrayBufferliên quan, ví dụ dữ liệu quá lớn.
Ví dụ
Fetch và giải mã một file
Đoạn mã dưới đây cho thấy cách bạn có thể fetch một file văn bản, trả body về dạng Uint8Array, rồi giải mã nó thành chuỗi.
const response = await fetch("https://www.example.com/textfile.txt");
const textFile = await response.bytes();
const string = new TextDecoder().decode(textFile);
console.log(string);
Lấy chữ ký file ảnh
Ví dụ này minh họa cách bạn có thể dùng bytes() để đọc các byte chữ ký của một số file ảnh và xác định loại file.
HTML
Trước hết chúng ta định nghĩa một phần tử <select> để chọn loại file, với các giá trị tương ứng cho biết file cụ thể trên Wikimedia Commons cần fetch.
<label for="file-select">Choose a file:</label>
<select name="Files" id="file-select">
<option value="">--Select an image type--</option>
<option
value="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png">
PNG
</option>
<option
value="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg">
JPG
</option>
<option
value="https://upload.wikimedia.org/wikipedia/commons/8/8f/Example.gif">
GIF89a
</option>
</select>
JavaScript
Đoạn mã trước hết kiểm tra xem phương thức bytes() có được hỗ trợ hay không.
Nếu có, nó thêm một trình xử lý sự kiện cho sự kiện change trên phần tử <select>.
Khi giá trị thay đổi, nó truyền giá trị được chọn (một URL của file ảnh) tới phương thức checkSignature() được định nghĩa bên dưới.
Nếu không hỗ trợ, nó ghi thông tin này ra log.
if ("bytes" in Response.prototype) {
const selectFileElement = document.getElementById("file-select");
selectFileElement.addEventListener("change", (event) => {
try {
checkSignature(event.target.value);
} catch (e) {
log(e);
}
});
} else {
log("Response.bytes() not supported");
}
Phương thức checkSignature() được định nghĩa bên dưới.
Nó fetch một file tại url đã cho, và dùng response.bytes() để lấy nội dung dưới dạng mảng byte.
Các byte đầu tiên sau đó được so sánh với chữ ký đầu của một số loại file ảnh phổ biến.
Tên file và loại file sau đó được ghi log.
async function checkSignature(url) {
if (url === "") return;
log(`File: ${url}`);
const response = await fetch(url);
const image = await response.bytes();
// Chữ ký file từ: https://en.wikipedia.org/wiki/List_of_file_signatures
const jpgSignature = [0xff, 0xd8, 0xff, 0xe0];
const pngSignature = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
const gif89aSignature = [0x47, 0x49, 0x46, 0x38, 0x39, 0x61];
if (
image
.slice(0, jpgSignature.length)
.every((byte, index) => byte === jpgSignature[index])
) {
log(`JPG signature: FF D8 FF E0`);
} else if (
image
.slice(0, pngSignature.length)
.every((byte, index) => byte === pngSignature[index])
) {
log(`PNG signature: 89 50 4E 47 0D 0A 1A 0A`);
} else if (
image
.slice(0, gif89aSignature.length)
.every((byte, index) => byte === gif89aSignature[index])
) {
log(`GIF (GIF89a) signature: 47 49 46 38 39 61`);
} else {
log("Unknown format");
}
}
Kết quả
Chọn một loại ảnh bằng danh sách chọn. Sau đó log sẽ hiển thị tên file cùng loại file được xác định từ chữ ký của file.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Fetch # dom-body-bytes |