phaserjs / phaserjs/phaser

Add AbortSignal Support to XHRLoader

Open
#6,971 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

💖 Feature Request 🗃 Loader
Dominant language
JavaScript
Stars
40.3k
Forks
7.2k
PR merge metrics
No merged PRs in 30d

Description

Hey Phaser team,

I would like to propose a pull request that adds support for AbortSignal to the XHRLoader. This enhancement will allow users to cancel ongoing XHR requests more effectively, improving resource management and user experience in scenarios where requests may need to be aborted.

Would you be open to reviewing PR like this? I believe it could be a valuable addition to the project.

Here is the diff:

diff --git a/node_modules/phaser/src/loader/File.js b/node_modules/phaser/src/loader/File.js
index 2538cdf..2612a17 100644
--- a/node_modules/phaser/src/loader/File.js
+++ b/node_modules/phaser/src/loader/File.js
@@ -407,6 +407,22 @@ var File = new Class({
         }
     },
 
+    /**
+     * Called if the file loading was aborted, is sent a DOM ProgressEvent.
+     *
+     * @method Phaser.Loader.File#onAbort
+     * @since 3.88.0
+     *
+     * @param {XMLHttpRequest} xhr - The XMLHttpRequest that caused this abort event.
+     * @param {ProgressEvent} event - The DOM ProgressEvent that resulted from this error.
+     */
+    onAbort: function ()
+    {
+        this.resetXHR();
+        this.state = CONST.FILE_LOAD_ABORTED;
+        this.loader.nextFile(this, false);
+    },
+
     /**
      * Called during the file load progress. Is sent a DOM ProgressEvent.
      *
diff --git a/node_modules/phaser/src/loader/XHRLoader.js b/node_modules/phaser/src/loader/XHRLoader.js
index b71bcb5..64d5900 100644
--- a/node_modules/phaser/src/loader/XHRLoader.js
+++ b/node_modules/phaser/src/loader/XHRLoader.js
@@ -75,12 +75,31 @@ var XHRLoader = function (file, globalXHRSettings)
 
     xhr.onload = file.onLoad.bind(file, xhr);
     xhr.onerror = file.onError.bind(file, xhr);
+    xhr.onabort = file.onAbort.bind(file, xhr);
     xhr.onprogress = file.onProgress.bind(file);
     xhr.ontimeout = file.onError.bind(file, xhr);
 
     //  This is the only standard method, the ones above are browser additions (maybe not universal?)
     // xhr.onreadystatechange
 
+    // Listening for the abort signal
+    if (config.signal) {
+        if (config.signal.aborted) {
+            xhr.abort();
+            return xhr;
+        }
+
+        var listener = function() {
+            xhr.abort();
+        };
+
+        xhr.onloadend = function() {
+            config.signal.removeEventListener('abort', listener);
+        }
+
+        config.signal.addEventListener('abort', listener);
+    }
+
     xhr.send();
 
     return xhr;
diff --git a/node_modules/phaser/src/loader/const.js b/node_modules/phaser/src/loader/const.js
index c3fc6f5..10b57de 100644
--- a/node_modules/phaser/src/loader/const.js
+++ b/node_modules/phaser/src/loader/const.js
@@ -148,8 +148,16 @@ var FILE_CONST = {
      * @type {number}
      * @since 3.60.0
      */
-    FILE_PENDING_DESTROY: 20
+    FILE_PENDING_DESTROY: 20,
 
+    /**
+     * File loading was aborted.
+     *
+     * @name Phaser.Loader.FILE_LOAD_ABORTED
+     * @type {number}
+     * @since 3.88.0
+     */
+    FILE_LOAD_ABORTED: 21
 };
 
 module.exports = FILE_CONST;

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/loader/File.js, src/loader/XHRLoader.js, and src/loader/const.js, focusing on the proposed abort handler, signal listener, and new file state. Review how existing load and error callbacks update file state, then verify that AbortSignal cancellation reaches the loader consistently and that the new constant is documented alongside the existing states.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.