Capture all Fetch Api AJAX requests

Question

Capture all Fetch Api AJAX requests

Is there a way to intercept all AJAX requests using the Fetch API? In the past, we were able to do this with XMLHttpRequest by implementing code similar to the following:

(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
      console.log('request started!');
      this.addEventListener('load', function() {
          console.log('request completed!');
          console.log(this.readyState); //always 4 (successful ajax completion)
          console.log(this.responseText); //response data
      });
      origOpen.apply(this, arguments);
    };
  })();

If you wanted to enhance the above approach, how would you intercept both Fetch API and XMLHttpRequest AJAX requests?

javascript ajax fetch-api

Answer 1

Answer №1

Here is a simple example showcasing how promises work:

var taperFunction = response => response;
var originalFetch = fetch;
fetch = (input, init) => originalFetch(input, init)
    .then(response => new Promise((resolve) => {
        resolve(taperFunction(response));
    }));

For a more complex and explicit demonstration, consider the following code snippet:

var originalFetch = fetch;
fetch = (input, init) => {
    debugger; // perform any desired actions on the request or reject it immediately
    return originalFetch(input, init).then(response => {
        // It's possible to await an existing promise and wrap its result in a new one instead of creating a new Promise instance in the constructor
        return new Promise((resolve) => {
            response.clone() // invoking `json()` only once, but cloning does the trick
                .json()
                .then(json => {
                    debugger; // take any necessary actions on the response, even `resolve(new Response(body, options));`
                    resolve(response);
                });
        });
    });
};

Answer 2

Here is a simple example showcasing how promises work:

var taperFunction = response => response;
var originalFetch = fetch;
fetch = (input, init) => originalFetch(input, init)
    .then(response => new Promise((resolve) => {
        resolve(taperFunction(response));
    }));

For a more complex and explicit demonstration, consider the following code snippet:

var originalFetch = fetch;
fetch = (input, init) => {
    debugger; // perform any desired actions on the request or reject it immediately
    return originalFetch(input, init).then(response => {
        // It's possible to await an existing promise and wrap its result in a new one instead of creating a new Promise instance in the constructor
        return new Promise((resolve) => {
            response.clone() // invoking `json()` only once, but cloning does the trick
                .json()
                .then(json => {
                    debugger; // take any necessary actions on the response, even `resolve(new Response(body, options));`
                    resolve(response);
                });
        });
    });
};

Answer 3

Answer №2

Implementing the use of async and await is fairly straightforward:

const originalFetch = window.fetch
window.fetch = async (input, options) => {
    return await originalFetch(input, options)
}

Here's a practical example:

const originalFetch = window.fetch
window.fetch = async (input, options) => {
    // make changes to the request here
    console.log(input)

    let response = await originalFetch(input, options)

    // manipulate the response
    let content = await response.text()
    content = 'goodbye!'
    return new Response(content, {
        status: response.status,
        statusText: response.statusText,
        headers: response.headers
    })
}

console.log(await (await fetch('/hello')).text())

Answer 4

Implementing the use of async and await is fairly straightforward:

const originalFetch = window.fetch
window.fetch = async (input, options) => {
    return await originalFetch(input, options)
}

Here's a practical example:

const originalFetch = window.fetch
window.fetch = async (input, options) => {
    // make changes to the request here
    console.log(input)

    let response = await originalFetch(input, options)

    // manipulate the response
    let content = await response.text()
    content = 'goodbye!'
    return new Response(content, {
        status: response.status,
        statusText: response.statusText,
        headers: response.headers
    })
}

console.log(await (await fetch('/hello')).text())

Answer 5

Answer №3

It's interesting to note that the Fetch API is natively supported by browsers and offers just one interface: fetch. The constructor returns a single Promise, making it impossible to access the Request or Response when attempting to customize the constructor.

The provided code snippet doesn't function as expected, leading to potential frustrations.

(function() {
    var oldFectch = fetch;
    fetch.consotructor = function() {
        return new Promise(resolve, reject) {
            // your hook code
        };
    };
})();

However, this does not imply that all aspects of the Fetch API cannot be customized. There are ways to achieve this!

Firstly, acknowledgment goes to the window.fetch polyfill.

Next, by making modifications in fetch.js, we can proceed with our desired changes.

(function(self) {
    'use strict';

    // comment or delete the following code block
    // if (self.fetch) {
    //    return
    // }

    var support = {
        searchParams: 'URLSearchParams' in self,
        iterable: 'Symbol' in self && 'iterator' in Symbol,
        // ...

Lastly, feel free to customize everything to suit your preferences!

self.fetch = function(input, init) {
  return new Promise(function(resolve, reject) {
    var request = new Request(input, init)
    var xhr = new XMLHttpRequest()

    // Make necessary tweaks here!
    // Gain access to the XMLHttpRequest Object
    // Customize as required!

    xhr.onload = function() {
      var options = {
        status: xhr.status,
        statusText: xhr.statusText,
        headers: parseHeaders(xhr.getAllResponseHeaders() || '')
      }
      options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL')
      var body = 'response' in xhr ? xhr.response : xhr.responseText
      resolve(new Response(body, options))
    }
    // ...

Answer 6

It's interesting to note that the Fetch API is natively supported by browsers and offers just one interface: fetch. The constructor returns a single Promise, making it impossible to access the Request or Response when attempting to customize the constructor.

The provided code snippet doesn't function as expected, leading to potential frustrations.

(function() {
    var oldFectch = fetch;
    fetch.consotructor = function() {
        return new Promise(resolve, reject) {
            // your hook code
        };
    };
})();

However, this does not imply that all aspects of the Fetch API cannot be customized. There are ways to achieve this!

Firstly, acknowledgment goes to the window.fetch polyfill.

Next, by making modifications in fetch.js, we can proceed with our desired changes.

(function(self) {
    'use strict';

    // comment or delete the following code block
    // if (self.fetch) {
    //    return
    // }

    var support = {
        searchParams: 'URLSearchParams' in self,
        iterable: 'Symbol' in self && 'iterator' in Symbol,
        // ...

Lastly, feel free to customize everything to suit your preferences!

self.fetch = function(input, init) {
  return new Promise(function(resolve, reject) {
    var request = new Request(input, init)
    var xhr = new XMLHttpRequest()

    // Make necessary tweaks here!
    // Gain access to the XMLHttpRequest Object
    // Customize as required!

    xhr.onload = function() {
      var options = {
        status: xhr.status,
        statusText: xhr.statusText,
        headers: parseHeaders(xhr.getAllResponseHeaders() || '')
      }
      options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL')
      var body = 'response' in xhr ? xhr.response : xhr.responseText
      resolve(new Response(body, options))
    }
    // ...

Capture all Fetch Api AJAX requests

Answer №1

Answer №2

Answer №3

Similar questions

Incorporating an external TypeScript script into JavaScript

Image carousel with variable height

Utilizing Stripe for Payment Processing

Content not being displayed in Rails 4 with AJAX using Bootstrap 3 Modal

Check if an element possesses a specific property and corresponding value in JavaScript

Create static HTML files using an Express server

How to access the onchange text in a react-select search component

Is there a way to eliminate the legend symbol for just one legend in Highcharts?

Refreshing an iframe located on disparate domains

Limit the number input to only allow values between 0 and 100

The process of uploading a file through ajax results in it being sent to php://input

Create a "load additional data" button

Having difficulty removing new or existing lines on StackBlitz

Refreshing webpage content by utilizing iframes

Modifying a Json file in a Node application, while retaining the previously stored data

How can an Embedded React + JSS component safeguard generic elements such as <button> and <p> from being affected by the page's style?

Looking for assistance with the AJAX flow

send back the result to the primary function

Sending data from an AJAX request to a Spring controller is a common task in web

The HTML element failed to be inserted