流式傳輸

使用流式API，我們可以在第一個位元抵達時，立即從網路或其他來源接收資源並處理它。 不必等待資源完全下載後再使用它，可以立即開始處理。 什麼是流？ 首先遇到的例子是載入YouTube視頻 - 在您開始觀看它之前，您不必完全載入它。 或者是直播，您甚至不知道內容何時結束。 內容甚至不必結束，它可以無限生成。 Streams API（流API） Streams API允許我們處理這種類型的內容。 我們有兩種不同的流模式：從流程讀取和寫入流程。 可讀流在除了Internet Explorer之外的所有現代瀏覽器中都可用。 可寫流在Firefox和Internet Explorer中不可用。 一如既往，請參閱caniuse.com上有關此問題的最新信息。 讓我們從可讀流開始 可讀流 當涉及到可讀流時，我們有三種對象類別： ReadableStream ReadableStreamDefaultReader ReadableStreamDefaultController 我們可以使用ReadableStream對像來消耗流。 這是第一個可讀流的例子。Fetch API允許從網絡中獲取資源並將其作為流程提供。 const stream = fetch('/resource') .then(response => response.body) fetch響應的body屬性是ReadableStream對象實例。這就是我們的可讀流。 閱讀器 在ReadableStream對像上調用getReader（）方法會返回ReadableStreamDefaultReader對像，即閱讀器。我們可以按如下方式獲取： const reader = fetch('/resource').then(response => response.body.getReader()) 我們按塊讀取數據，其中一個塊是一個位元組或一個類型化數組。將塊排入流程，並逐個塊讀取它們。 單個流程可以包含不同類型的块。 一旦我們有了ReadableStreamDefaultReader對象，我們可以使用read（）方法訪問數據。 只要創建了閱讀器，流程就鎖定了，其他讀者不能從它獲取塊，直到我們在閱讀器上調用releaseLock（）。 您可以使用tee()方法來實現這種效果，後面將更詳細介紹。 從可讀流讀取數據 一旦我們有了ReadableStreamDefaultReader對象實例，就可以從中讀取數據。 以下是如何按字節（由於CORS原因，您可以在打開了該頁面的DevTools窗口中執行此操作）逐個字節讀取flaviocopes.com網頁的首個块的數據的方法。 fetch('https://flaviocopes.com/') .then(response => { response.body .getReader() .read() .then(({value, done}) => { console.log(value) }) }) 如果你打開每組數組項，你會得到單個項目。這些都是以Uint8Array存儲的字元： 您可以使用Encoding API將這些字節轉換為字符： const decoder = new TextDecoder('utf-8') fetch('https://flaviocopes....