JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<pre id="response">

</pre>

JavaScript

// Author: lidlanca 2021 March 24

/**
Fetchange - implement a simple fetch wrapper
  - add ability to add default header or define overrides 
  - url hook, allow url manipulation, and header injection  
**/

Fetchange = (function (_fetch) {
  var headers = new Map();
  var headersDefaults = new Map();
  var tempHeaders = new Map();
  var urlHook = new Map();

  var self = {
    async fetch() {
      // handle url hooks
      var url = arguments[0];
      if (urlHook.size > 0) {
        url = self.onUrlHook(url);
        arguments[0] = url;
      }

      // handle headers
      if (arguments.length >= 2) {
        headerOverride = Object.fromEntries(headers);
        headerDefault = Object.fromEntries(headersDefaults);
        headerTemp = Object.fromEntries(tempHeaders);
        headerOverride = { ...headerOverride, ...headerTemp };

        if (arguments[1]?.headers) {
          arguments[1].headers = {
            ...headerDefault,
            ...arguments[1].headers,
            ...headerOverride,
          };
        } else {
          arguments[1].headers = { ...headerDefault, ...headerOverride };
        }
        //console.log(arguments[1].headers);
      }
      tempHeaders.clear(); // clean tempHeaders for next request.

      return _fetch(...arguments);
    },
    addHeader(key, value) {
      headers.set(key, value);
    },
    addTempHeader(key, value) {
      tempHeaders.set(key, value);
    },
    addHeaderDefault(key, value) {
      headersDefaults.set(key, value);
    },
    removeHeader(key) {
      headers.delete(key);
    },
    addHeaders(h) {
      Object.entries(h).forEach(([k, v]) => {
        self.addHeader(k, v);
      });
    },
    addHeadersDefault(h) {
      Object.entries(h).forEach(([k, v]) => {
        self.addHeaderDefault(k, v);
      });
    },
    addUrlHook(fn) {
      urlHook.set(fn, fn);
    },
    onUrlHook(url) {
      var original = url;
      urlHook.forEach((v) => {
        url = v(url, original);
      });
     ...