Why requests are showing up at chrome tool's "Other" tab (instead of XHR) when using fetch API

Question

So I wanted to use fetch API and it's fine, however all requests made with it falls under "Other" section in Google Chrome. I'd prefer those to be in XHR section.

Here is http.js service I use for those requests.

import 'whatwg-fetch'
import Auth from './Auth';
import Url from 'url-parse';


const API_URL = process.env.API_URL

const http = {
  get: get,
  getAuthed: getAuthed,
  post: post,
  postAuthed: postAuthed,
  getDefaultHeaders: getDefaultHeaders,
  getApiUrl: getApiUrl,
}
window.http = http
export default http


function post(url, data, extraHeaders, opts) {
  extraHeaders = extraHeaders || {}
  opts = opts || {}
  let request = performRequest(url, {
    method: 'POST',
    headers: mergeHeaders(getDefaultHeaders(), extraHeaders),
    body: JSON.stringify(data),
  })
  if (opts.returnRawRequest) {
    return request
  } else {
    return processRequest(request)
  }
}

function get(url, extraHeaders, opts) {
  extraHeaders = extraHeaders || {}
  opts = opts || {}
  let request = performRequest(url, {
    method: 'GET',
    headers: mergeHeaders(getDefaultHeaders(), extraHeaders),
  })
  if (opts.returnRawRequest) {
    return request
  } else {
    return processRequest(request)
  }
}


function getAuthed(url, opts) {
  return get(url, getAuthHeaders(), opts)
}

function postAuthed(url, data, opts) {
  return post(url, data, getAuthHeaders(), opts)
}

function getAuthHeaders() {
  let token = Auth.getAuthToken()
  if (token) {
    return {Authorization: `Token ${token}`}
  } else {
    return {}
  }
}


function performRequest(url, opts) {
  url = getApiUrl(url)
  opts = opts || {}
  return fetch(url, opts)
}


export function getApiUrl(url) {
  var parsedUrl = new Url(url)
  if (parsedUrl.href !== url) {
    url = urljoin(API_URL, url)
  }
  return url
}

function isPath(url) {
  let parsed = new Url(url)
  //console.log(" => isPath parsed:", parsed);
  return !parsed.protocol
}

function urljoin(baseUrl, path) {
  if (baseUrl && baseUrl[baseUrl.length - 1] === '/') {
    baseUrl = baseUrl.slice(0, baseUrl.length - 1)
  }
  if (path && path[0] === '/') {
    path = path.slice(1)
  }
  return [baseUrl, path].join('/');
}

function processRequest(request) {
  return request
    .then((response) => {
      let promise = response.json()
      let successPromise = promise.then((data) => {
        response.data = data
        return response
      })

      if (response.status >= 200 && response.status < 400) {
        return successPromise
      } else {
        return promise.then(err => { throw response })
      }
    })
}


function mergeHeaders(defaultHeaders, headers) {
  var result = Object.assign({}, defaultHeaders, headers)
  for (const key in headers) {
    if (headers[key] === null) {
      delete result[key]
    }
  }
  return result
}


function getDefaultHeaders() {
  return {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
}

Answer 1

I guess, but I'm not sure, that the Fetch API is not using XMLHttpRequest objects.

Even it's asynchronous HTTP calls, it's technically not an XMLHttpRequest (XHR)