whatwg-fetch

You can automatically polyfill window.fetch by importing the package. If you need to access the polyfill implementation specifically (e.g., to use abort functionality in browsers with outdated native fetch), you can import it as a named export.

// Automatically polyfills window.fetch
import 'whatwg-fetch';

// Access the polyfill implementation directly
import {fetch as fetchPolyfill} from 'whatwg-fetch';

window.fetch(...);    // uses native browser version if available
fetchPolyfill(...);  // uses polyfill implementation

Install the whatwg-fetch polyfill via npm. Note that you also need a Promise polyfill for older browsers (e.g., taylorhakes/promise-polyfill) to ensure compatibility.

npm install whatwg-fetch --save

By default, fetch() resolves even if the server returns an error status (like 404 or 500). To make the Promise reject on non-2xx statuses, implement a custom response handler that checks response.status.

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

fetch('/users')
  .then(checkStatus)
  .then(response => response.json())
  .then(data => console.log('success', data))
  .catch(error => console.log('failed', error))

To ensure consistent cookie behavior across different browsers, explicitly set the credentials option:

• Use credentials: 'include' for CORS requests to allow sending credentials to other domains.
• Use credentials: 'same-origin' for standard requests to ensure cookies are sent to the same domain, especially when targeting older browsers (Firefox 39-60, Chrome 42-67, Safari 10.1-11.1.2) where the default might have been 'omit'.

// For CORS
fetch('https://example.com/users', { credentials: 'include' })

// For same-origin (recommended for compatibility)
fetch('/users', { credentials: 'same-origin' })

To abort a request, you must use the AbortController and AbortSignal APIs. Since browsers requiring this polyfill often lack native support for these APIs, you may need to include an additional polyfill like yet-another-abortcontroller-polyfill.

import 'yet-another-abortcontroller-polyfill'
import {fetch as fetchPolyfill} from 'whatwg-fetch'

// Use native fetch if it supports signals, otherwise use polyfill
const abortableFetch = ('signal' in new Request('')) ? window.fetch : fetchPolyfill

const controller = new AbortController()

abortableFetch('/avatars', {
  signal: controller.signal
}).catch(function(ex) {
  if (ex.name === 'AbortError') {
    console.log('request aborted')
  }
})

// Trigger abort
controller.abort()

To use the polyfill with webpack, add whatwg-fetch to your entry configuration before your application entry point.

entry: ['whatwg-fetch', ...]

Use the FormData API to send form data or files via fetch. This automatically sets the appropriate content type.

// Post form
var form = document.querySelector('form')
fetch('/users', {
  method: 'POST',
  body: new FormData(form)
})

// File upload
var input = document.querySelector('input[type="file"]')
var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'POST',
  body: data
})

Use fetch() to retrieve JSON and parse it using the .json() method on the response object.

fetch('/users.json')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

To send JSON data, set the method to 'POST', include the 'Content-Type': 'application/json' header, and stringify your body using JSON.stringify().

fetch('/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
})

The fetch() function initiates a network request and returns a Promise that resolves to a Response object. It can take a URL string or a Request object as the first argument, and an optional init object for configuration.

// Basic usage
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// Usage with init options
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});