skip to Main Content

(See also this answer.)

When I redefine the Promise class (with a "monkey-patch" as shown below), this does not affect promises that are returned by a native function like fetch:

Promise = class extends Promise {
  constructor(executor) {
    console.log("Promise created");
    super(executor);
  }
}
console.log("Non-native promise");
Promise.resolve(1);
console.log("Native promise");
fetch("https://httpbin.org/delay/1");
console.log("Native promise");
document.hasStorageAccess();

When I run this snippet in the browser, the promise created by Promise.resolve uses the redefinition (so that "Promise created" is logged), but the promises returned by fetch or document.hasStorageAccess do not.

(When I try it in Node.js, fetch uses the redefinition, so it really depends on the implementation.)

I there a way to redefine Promise such that the redefinition is also used by native browser functions?

2

Answers


  1. [Is] there a way to redefine Promise such that the redefinition is also used by native browser functions?

    No, there is not (and the same goes for async functions). Things you can do include:

    • altering Promise.prototype

    • replacing the functions that return native promises with wrappers that return your promise type

    (I wouldn’t recommend doing either of these things for any normal purpose, including getting better stack traces for error reporting.)

    Login or Signup to reply.
  2. Native browser APIs are precompiled and operate independently of the JavaScript runtime’s global objects like Promise.

    When you override Promise in JavaScript (e.g., window.Promise = …), it only affects the JavaScript environment. Native APIs continue to use their internal references, ignoring the overridden global Promise.

    In your case, you will have to monkey-patch not only Promise, but also fetch or any other native API as a whole to achieve the intended result.

    const originalFetch = window.fetch;
    window.fetch = function(...args) {
      console.log("Fetch called with arguments:", args);
      const promise = originalFetch.apply(this, args);
      promise.then(
        (response) => console.log("Fetch promise resolved:", response),
        (error) => console.log("Fetch promise rejected:", error)
      );
      return promise;
    };
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search