Overwrite & Replace Original Window.fetch for something logic & get information in every request & response

fetch-overwrite.md

This code for get all information on event in request/response (XHR/Fetch) you can manipulation everything in Request/Response like headers, data, & etc.

i don't want to handle 10++ request for get something in request/response, so overwrite window.fetch (globally) to do it.

const OriginalFetch = window.fetch

window.fetch = (url, options) => {
  const promise = OriginalFetch(url, options)
  promise.then((response) => {
    /** 
     * What you want here
     * this just example to get Headers like x-csrf-token
     * on response.
     */
    const csrf = response.headers.get('x-csrf-token')
    if (csrf) {
    /* 
     * Last Response always set sessionStorage for
     * csrf_token value
     * sessionStorage its optional
     * you can use another in WebStorage
     */
    window.sessionStorage.setItem('csrf_token', csrf)
    }
  })
  return promise
}

/* get X-CSRF-Token in SessionStorage after Request end. */
window.sessionStorage.getItem('csrf_token')

Happy Hacking

• @ri7nz