ajax fetch api,javascript - Hook all Fetch Api AJAX requests - Stack Overflow

In fact, Fetch Api is supported by native browser and only has one interface: fetch.

The constructor return one Promise, and you can't get the Request、Response when you want to return your Promise to rewrite the fetch's constructor.

The following code doesn't work well.

(function() {

var oldFectch = fetch;

fetch.consotructor = function() {

return new Promise(resolve, reject) {

// your hook code

};

};

})();

So,Does it mean we can't hook all Fetch Api ? NO!

Then, let's do something(edit fetch.js) and rock.

(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,

// ...

Last, hook every thing as your better!

self.fetch = function(input, init) {

return new Promise(function(resolve, reject) {

var request = new Request(input, init)

var xhr = new XMLHttpRequest()

// Here we go!

// Now we get the XMLHttpRequest Object

// Do what you want!

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))

}

// ...