Rewrite Book.loadFromFetch() using async/await.

Author: codedread

code/book-binder.js

@@ -220,7 +220,7 @@ export class BookBinder extends EventTarget {
  * @param {string} fileNameOrUri The filename or URI.  Must end in a file extension that can be
  *     used to guess what type of book this is.
  * @param {ArrayBuffer} ab The initial ArrayBuffer to start the unarchiving process.
- * @param {number} totalExpectedSize Thee total expected size of the archived book in bytes.
+ * @param {number} totalExpectedSize The total expected size of the archived book in bytes.
  * @returns {Promise<BookBinder>} A Promise that will resolve with a BookBinder.
  */
 export function createBookBinderAsync(fileNameOrUri, ab, totalExpectedSize) {

code/book.js

@@ -321,7 +321,7 @@ export class Book extends EventTarget {
    * Starts a fetch and progressively loads in the book.
    * @returns {Promise<Book>} A Promise that returns this book when all bytes have been fed to it.
    */
-  loadFromFetch() {
+  async loadFromFetch() {
     if (!this.#needsLoading) {
       throw 'Cannot try to load via Fetch when the Book is already loading or loaded';
     }
@@ -332,88 +332,62 @@ export class Book extends EventTarget {
     this.#needsLoading = false;
     this.dispatchEvent(new BookLoadingStartedEvent(this));
 
-    return fetch(this.#request).then(response => {
-
-      let pendingChunks = [];
-      const reader = response.body.getReader();
-      /**
-       * This function receives a chunk. On the first chunk, it starts the async process of creating
-       * a BookBinder (analyzing the bytes and loading a script to instantiate the binder). Until
-       * the binder is created, all chunks are stored in the pendingChunks array. Once the binder
-       * object is created, all pending chunks are processed in order. On the last chunk, send the
-       * BookLoadingComplete event.
-       * @returns {Promise<Book>}
-       */
-      const readAndProcessNextChunk = () => {
-        reader.read().then(({ done, value }) => {
-          if (Params['debugFetch'] === 'true') {
-            let str = `debugFetch: readAndProcessNextChunk(), `;
-            if (done) { str += 'done'; }
-            else { str += `buffer.byteLength=${value.buffer.byteLength}`; }
-            console.log(str);
-          }
-          if (!done) {
-            // value is a chunk of the file as a Uint8Array.
-            if (!this.#bookBinder) {
-              // It is possible for #startBookBinding() to not set #bookBinder immediately because
-              // the binder script or the unarchiving script needs to load and be connected.
-              if (this.#startedBinding) {
-                if (Params['debugFetch'] === 'true') {
-                  console.log(`debugFetch: Found a pending chunk of length ${value.buffer.byteLength}`);
-                }
-                pendingChunks.push(value.buffer);
-                return readAndProcessNextChunk();
-              }
-              if (Params['debugFetch'] === 'true') {
-                console.log(`debugFetch: Got first chunk of length ${value.buffer.byteLength}`);
-              }
-              // Else if binding has not started, start the book binding process (asynchronously).
-              return this.#startBookBinding(this.#name, value.buffer, this.#expectedSize).then(() => {
-                if (!this.#bookBinder) {
-                  throw `bookBinder was not set after startBookBinding()`;
-                }
-                // After this point, #bookBinder is set.
-                if (Params['debugFetch'] === 'true') {
-                  console.log(`debugFetch: Book Binder created`);
-                }
-                if (pendingChunks.length > 0) {
-                  for (const chunk of pendingChunks) {
-                    this.appendBytes(chunk);
-                    this.#bookBinder.appendBytes(chunk);
-                    if (Params['debugFetch'] === 'true') {
-                      console.log(`debugFetch: Processed chunk of length ${chunk.byteLength}`);
-                    }
-                  }
-                  pendingChunks = [];
-                }
-                return readAndProcessNextChunk();
-              })
-            } // if (!this.#bookBinder)
-
-            if (Params['debugFetch'] === 'true') {
-              console.log(`debugFetch: Got a chunk after binding of length ${value.buffer.byteLength}`);
-            }
-
-            // Process the chunk.
-            this.appendBytes(value.buffer);
-            this.#bookBinder.appendBytes(value.buffer);
-            
-            return readAndProcessNextChunk();
-          } else {
-            if (Params['debugFetch'] === 'true') {
-              console.log(`debugFetch: Got to the end, done fetching book chunks`);
-            }
-            this.#finishedLoading = true;
-            this.dispatchEvent(new BookLoadingCompleteEvent(this));
-            return this;
-          }
-        });
-      };
-      return readAndProcessNextChunk();
-    }).catch(e => {
+    /** @type {Response} */
+    let response;
+    try {
+      response = await fetch(this.#request);
+    } catch (e) {
       console.error(`Error from fetch: ${e}`);
       throw e;
-    });
+    }
+
+    // =============================================================================================
+    // Option 1: Readable code, fetching chunk by chunk using await.
+    const reader = response.body.getReader();
+
+    /**
+     * Reads one chunk at a time.
+     * @returns {Promise<ArrayBuffer | null>}
+     */
+    const getOneChunk = async () => {
+      const { done, value } = await reader.read();
+      if (!done) return value.buffer;
+      return null;
+    };
+
+    const firstChunk = await getOneChunk();
+    if (!firstChunk) {
+      throw `Could not get one chunk from fetch()`;
+    }
+    let bytesTotal = firstChunk.byteLength;
+
+    // Asynchronously wait for the BookBinder and its implementation to be connected.
+    await this.#startBookBinding(this.#name, firstChunk, this.#expectedSize);
+
+    // Read out all subsequent chunks.
+    /** @type {ArrayBuffer | null} */
+    let nextChunk;
+    while (nextChunk = await getOneChunk()) {
+      bytesTotal += nextChunk.byteLength;
+      this.appendBytes(nextChunk);
+      this.#bookBinder.appendBytes(nextChunk);
+    }
+
+
+    // =============================================================================================
+    // Option 2: The XHR way (grab all bytes and only then start book binding).
+    // const ab = await response.arrayBuffer();
+    // bytesTotal = ab.byteLength;
+    // await this.#startBookBinding(this.#name, ab, this.#expectedSize);
+  
+    // Send out BookLoadingComplete event and return this book.
+    this.#finishedLoading = true;
+    this.dispatchEvent(new BookLoadingCompleteEvent(this));
+    if (Params['debugFetch'] === 'true') {
+      console.log(`debugFetch: ArrayBuffers were total length ${bytesTotal}`);
+    }
+
+    return this;
   }
 
   /**

code/epub/epub-book-binder.js

@@ -57,36 +57,50 @@ export class EPUBBookBinder extends BookBinder {
     /**
      * A map of all files in the archive, keyed by its full path in the archive with the value
      * being the raw ArrayBuffer.
-     * @private {Map<string, Uint8Array>}
+     * @type {Map<string, Uint8Array>}
+     * @private
      */
     this.fileMap_ = new Map();
 
-    /** @private {string} */
+    /**
+     * @type {string}
+     * @private
+     */
     this.opfFilename_ = undefined;
 
     /**
      * Maps the id of each manifest item to its file reference.
-     * @private {Map<string, FileRef>}
+     * @type {Map<string, FileRef>}
+     * @private
      */
     this.manifestFileMap_ = new Map();
 
     /**
      * The ordered list of reading items.
-     * @private {Array<FileRef>}
+     * @type {Array<FileRef>}
+     * @private
      */
     this.spineRefs_ = [];
   }
 
   /** @override */
   beforeStart_() {
+    if (Params['debugFetch'] === 'true') {
+      console.log(`EPubBookBinder.beforeStart_()`);
+    }
     let firstFile = true;
+    let numExtractions = 0;
     this.unarchiver.onExtract(evt => {
+      numExtractions++;
       /** @type {import('../bitjs/archive/decompress.js').UnarchivedFile} */
       const theFile = evt.unarchivedFile;
       if (Params['debugFetch'] === 'true' && this.fileMap_.has(theFile.filename)) {
         // TODO: How does it get multiple extract events for the same file?
-        debugger;
+        console.error(`debugFetch: Received an EXTRACT event for ${theFile.filename}, but already have that file!`);
+        return;
       }
+
+      // This is a new file. Add it to the map.
       this.fileMap_.set(theFile.filename, theFile.fileData);
       if (Params['debugFetch'] === 'true') {
         console.log(`debugFetch: Extracted file ${theFile.filename} of size ${theFile.fileData.byteLength}`);
@@ -99,6 +113,10 @@ export class EPUBBookBinder extends BookBinder {
       }
     });
     this.unarchiver.addEventListener(UnarchiveEventType.FINISH, evt => {
+      if (Params['debugFetch'] === 'true') {
+        console.log(`debugFetch: Received UnarchiveEventType.FINISH event with ${numExtractions} extractions`);
+      }
+
       this.setUnarchiveComplete();
       this.dispatchEvent(new BookProgressEvent(this));
       this.parseContainer_();