Streams API
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2019.
* Some parts of this feature may have varying levels of support.
Note: This feature is available in Web Workers.
API luồng cho phép JavaScript truy cập theo chương trình các luồng dữ liệu nhận được qua mạng và xử lý chúng theo mong muốn của nhà phát triển.
Khái niệm và cách sử dụng
Truyền phát liên quan đến việc chia tài nguyên mà bạn muốn nhận qua mạng thành các phần nhỏ, sau đó xử lý tài nguyên đó từng chút một. Các trình duyệt đã thực hiện điều này khi nhận nội dung phương tiện - video sẽ đệm và phát khi có nhiều nội dung tải xuống hơn và đôi khi bạn sẽ thấy hình ảnh hiển thị dần dần khi có nhiều nội dung được tải hơn.
Nhưng khả năng này chưa bao giờ có sẵn cho JavaScript trước đây. Trước đây, nếu chúng tôi muốn xử lý một loại tài nguyên nào đó (video, tệp văn bản, v.v.), chúng tôi phải tải xuống toàn bộ tệp, đợi cho đến khi nó được giải tuần tự hóa thành định dạng phù hợp, sau đó xử lý tất cả dữ liệu.
Với API Luồng, bạn có thể bắt đầu xử lý dữ liệu thô bằng JavaScript từng chút một, ngay khi có sẵn mà không cần tạo bộ đệm, chuỗi hoặc blob.
Ngoài ra còn có nhiều ưu điểm hơn — bạn có thể phát hiện thời điểm bắt đầu hoặc kết thúc luồng, xâu chuỗi các luồng lại với nhau, xử lý lỗi và hủy luồng theo yêu cầu cũng như phản ứng với tốc độ đọc luồng.
Việc sử dụng Luồng phụ thuộc vào việc cung cấp phản hồi dưới dạng luồng. Ví dụ: nội dung phản hồi được trả về bởi yêu cầu tìm nạp thành công là ReadableStream mà trình đọc được tạo bằng ReadableStream.getReader() có thể đọc được.
Các cách sử dụng phức tạp hơn bao gồm việc tạo luồng của riêng bạn bằng cách sử dụng hàm tạo ReadableStream(), chẳng hạn như để xử lý dữ liệu bên trong nhân viên dịch vụ.
Bạn cũng có thể ghi dữ liệu vào luồng bằng WritableStream.
[!LƯU Ý] Bạn có thể tìm thấy nhiều thông tin chi tiết hơn về lý thuyết và thực tiễn về luồng trong các bài viết của chúng tôi — Khái niệm API luồng, Sử dụng luồng có thể đọc được, Sử dụng luồng byte có thể đọc được và Sử dụng luồng có thể ghi.
Giao diện luồng
Luồng có thể đọc được
ReadableStream-
Biểu thị luồng dữ liệu có thể đọc được. Nó có thể được sử dụng để xử lý các luồng phản hồi của API tìm nạp hoặc các luồng do nhà phát triển xác định (ví dụ: hàm tạo
ReadableStream()tùy chỉnh). ReadableStreamDefaultReader-
Đại diện cho một trình đọc mặc định có thể được sử dụng để đọc dữ liệu luồng được cung cấp từ mạng (ví dụ: yêu cầu tìm nạp).
ReadableStreamDefaultController-
Đại diện cho bộ điều khiển cho phép kiểm soát trạng thái và hàng đợi nội bộ của
ReadableStream. Bộ điều khiển mặc định dành cho các luồng không phải là luồng byte.
Luồng có thể ghi
WritableStream-
Cung cấp một bản tóm tắt tiêu chuẩn để ghi dữ liệu truyền phát đến đích, được gọi là phần chìm. Đối tượng này đi kèm với áp suất ngược và xếp hàng tích hợp.
WritableStreamDefaultWriter-
Đại diện cho trình ghi luồng có thể ghi mặc định có thể được sử dụng để ghi các khối dữ liệu vào luồng có thể ghi.
WritableStreamDefaultController-
Đại diện cho bộ điều khiển cho phép kiểm soát trạng thái của
WritableStream. Khi xây dựngWritableStream, phần chìm bên dưới được cung cấp một phiên bảnWritableStreamDefaultControllertương ứng để thao tác.
Chuyển đổi luồng
TransformStream-
Thể hiện sự trừu tượng hóa cho một đối tượng luồng biến đổi dữ liệu khi nó đi qua chuỗi ống của các đối tượng luồng.
TransformStreamDefaultController-
Cung cấp các phương thức để thao tác
ReadableStreamvàWritableStreamđược liên kết với luồng biến đổi.
API và hoạt động của luồng liên quan
ByteLengthQueuingStrategy-
Cung cấp chiến lược xếp hàng có độ dài byte tích hợp có thể được sử dụng khi xây dựng luồng.
CountQueuingStrategy-
Cung cấp chiến lược xếp hàng đếm đoạn tích hợp có thể được sử dụng khi xây dựng luồng.
Tiện ích mở rộng cho các API khác
Request-
Khi một đối tượng
Requestmới được tạo, bạn có thể chuyển cho nóReadableStreamtrong thuộc tínhbodycủa từ điểnRequestInitcủa nó.Requestnày sau đó có thể được chuyển đếnfetch()để bắt đầu tìm nạp luồng. Response.body-
Nội dung phản hồi được trả về bởi yêu cầu tìm nạp theo mặc định được hiển thị dưới dạng
ReadableStreamvà có thể có trình đọc được đính kèm với nó, v.v.
Các giao diện liên quan đến ByteStream
ReadableStreamBYOBReader-
Đại diện cho trình đọc BYOB ("mang bộ đệm của riêng bạn") có thể được sử dụng để đọc dữ liệu luồng do nhà phát triển cung cấp (ví dụ: hàm tạo
ReadableStream()tùy chỉnh). ReadableByteStreamController-
Đại diện cho bộ điều khiển cho phép kiểm soát trạng thái và hàng đợi nội bộ của
ReadableStream. Bộ điều khiển luồng byte dành cho luồng byte. ReadableStreamBYOBRequest-
Thể hiện yêu cầu kéo vào trong
ReadableByteStreamController.
Ví dụ
Chúng tôi đã tạo một thư mục gồm các ví dụ đi kèm với tài liệu API Streams — xem mdn/dom-examples/streams. Các ví dụ như sau:
- Bơm luồng đơn giản: Ví dụ này cho thấy cách sử dụng ReadableStream và truyền dữ liệu của nó sang một luồng khác.
- Thang độ xám a PNG: Ví dụ này cho thấy cách ReadableStream của PNG có thể được chuyển thành thang độ xám.
- Luồng ngẫu nhiên đơn giản: Ví dụ này cho thấy cách sử dụng luồng tùy chỉnh để tạo các chuỗi ngẫu nhiên, xếp chúng vào hàng đợi dưới dạng các đoạn rồi đọc lại.
- Ví dụ về phát bóng đơn giản: Ví dụ này mở rộng ví dụ về luồng ngẫu nhiên đơn giản, cho thấy cách một luồng có thể được phát bóng và cả hai luồng kết quả đều có thể được đọc độc lập.
- Nhà văn đơn giản: Ví dụ này cho thấy cách ghi vào luồng có thể ghi, sau đó giải mã luồng và ghi nội dung vào giao diện người dùng.
- Giải nén các đoạn của PNG: Ví dụ này cho thấy cách
pipeThrough()có thể được sử dụng để chuyển đổi ReadableStream thành luồng gồm các loại dữ liệu khác bằng cách chuyển đổi dữ liệu của tệp PNG thành luồng các đoạn PNG.
Thông số kỹ thuật
| Specification |
|---|
| Streams # rs-class |
| Streams # ws-class |