所以我想使用 fetch API没关系，但是用它发出的所有请求都属于 Google Chrome 中的“其他”部分。我希望将它们放在 XHR 部分。

这是我用于这些请求的 http.js 服务。

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'
  }
}

最佳答案

我想，但我不确定，Fetch API 没有使用 XMLHttpRequest 对象。

即使它是异步 HTTP 调用，从技术上讲它也不是 XMLHttpRequest (XHR)

关于javascript - 为什么在使用 fetch API 时请求显示在 chrome 工具的 "Other"选项卡(而不是 XHR)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42883874/