Loader: Add abort().

Author: Mugen87

src/loaders/FileLoader.js

@@ -55,6 +55,14 @@ class FileLoader extends Loader {
 		 */
 		this.responseType = '';
 
+		/**
+		 * Used for aborting requests.
+		 *
+		 * @private
+		 * @type {AbortController}
+		 */
+		this._abortController = new AbortController();
+
 	}
 
 	/**
@@ -121,7 +129,7 @@ class FileLoader extends Loader {
 		const req = new Request( url, {
 			headers: new Headers( this.requestHeader ),
 			credentials: this.withCredentials ? 'include' : 'same-origin',
-			// An abort controller could be added within a future PR
+			signal: this._abortController.signal
 		} );
 
 		// record states ( avoid data race )
@@ -338,6 +346,19 @@ class FileLoader extends Loader {
 
 	}
 
+	/**
+	 * Aborts ongoing fetch requests.
+	 *
+	 * @return {FileLoader} A reference to this instance.
+	 */
+	abort() {
+
+		this._abortController.abort();
+
+		return this;
+
+	}
+
 }
 
 

src/loaders/ImageBitmapLoader.js

@@ -66,6 +66,14 @@ class ImageBitmapLoader extends Loader {
 		 */
 		this.options = { premultiplyAlpha: 'none' };
 
+		/**
+		 * Used for aborting requests.
+		 *
+		 * @private
+		 * @type {AbortController}
+		 */
+		this._abortController = new AbortController();
+
 	}
 
 	/**
@@ -154,6 +162,7 @@ class ImageBitmapLoader extends Loader {
 		const fetchOptions = {};
 		fetchOptions.credentials = ( this.crossOrigin === 'anonymous' ) ? 'same-origin' : 'include';
 		fetchOptions.headers = this.requestHeader;
+		fetchOptions.signal = this._abortController.signal;
 
 		const promise = fetch( url, fetchOptions ).then( function ( res ) {
 
@@ -191,6 +200,19 @@ class ImageBitmapLoader extends Loader {
 
 	}
 
+	/**
+	 * Aborts ongoing fetch requests.
+	 *
+	 * @return {ImageBitmapLoader} A reference to this instance.
+	 */
+	abort() {
+
+		this._abortController.abort();
+
+		return this;
+
+	}
+
 }
 
 export { ImageBitmapLoader };

src/loaders/Loader.js

@@ -61,12 +61,21 @@ class Loader {
 		 */
 		this.requestHeader = {};
 
+		//
+
+		if ( manager.enableAbortManagement === true ) {
+
+			manager.addEventListener( 'abort', () => this.abort() );
+
+		}
+
 	}
 
 	/**
 	 * This method needs to be implemented by all concrete loaders. It holds the
 	 * logic for loading assets from the backend.
 	 *
+	 * @abstract
 	 * @param {string} url - The path/URL of the file to be loaded.
 	 * @param {Function} onLoad - Executed when the loading process has been finished.
 	 * @param {onProgressCallback} [onProgress] - Executed while the loading is in progress.
@@ -97,6 +106,7 @@ class Loader {
 	 * This method needs to be implemented by all concrete loaders. It holds the
 	 * logic for parsing the asset into three.js entities.
 	 *
+	 * @abstract
 	 * @param {any} data - The data to parse.
 	 */
 	parse( /* data */ ) {}
@@ -171,6 +181,18 @@ class Loader {
 
 	}
 
+	/**
+	 * This method can be implemented in loaders for aborting ongoing requests.
+	 *
+	 * @abstract
+	 * @return {Loader} A reference to this instance.
+	 */
+	abort() {
+
+		return this;
+
+	}
+
 }
 
 /**

src/loaders/LoadingManager.js

@@ -1,3 +1,13 @@
+import { EventDispatcher } from '../core/EventDispatcher.js';
+
+/**
+ * Fires when {@link LoadingManager#abort} is called.
+ *
+ * @event LoadingManager#abort
+ * @type {Object}
+ */
+const _abort = { type: 'abort' };
+
 /**
  * Handles and keeps track of loaded and pending data. A default global
  * instance of this class is created and used by loaders if not supplied
@@ -15,7 +25,7 @@
  * const loader2 = new ColladaLoader( manager );
  * ```
  */
-class LoadingManager {
+class LoadingManager extends EventDispatcher {
 
 	/**
 	 * Constructs a new loading manager.
@@ -26,6 +36,8 @@ class LoadingManager {
 	 */
 	constructor( onLoad, onProgress, onError ) {
 
+		super();
+
 		const scope = this;
 
 		let isLoading = false;
@@ -69,6 +81,14 @@ class LoadingManager {
 		 */
 		this.onError = onError;
 
+		/**
+		 * Whether loading requests can be aborted with {@link LoadingManager#abort} or not.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.enableAbortManagement = false;
+
 		/**
 		 * This should be called by any loader using the manager when the loader
 		 * starts loading an item.
@@ -269,6 +289,36 @@ class LoadingManager {
 
 		};
 
+		/**
+		 * Can be used to abort ongoing loading requests in loaders using this manager.
+		 * The abort only works if {@link LoadingManager#enableAbortManagement} is set
+		 * to `true` and the loaders implement {@link Loader#abort}.
+		 *
+		 * @fires LoadingManager#abort
+		 * @return {LoadingManager} A reference to this loading manager.
+		 */
+		this.abort = function () {
+
+			this.dispatchEvent( _abort );
+
+			return this;
+
+		};
+
+		/**
+		 * Frees internal resources. Call this method whenever this instance is no
+		 * longer used in your app.
+		 *
+		 * @return {LoadingManager} A reference to this loading manager.
+		 */
+		this.dispose = function () {
+
+			this._listeners = {}; // remove abort handler
+
+			return this;
+
+		};
+
 	}
 
 }