Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
whatwg-fetch
Advanced tools
The whatwg-fetch npm package is a polyfill for the Fetch API, a modern interface for making network requests in browsers and Node.js. It allows developers to make HTTP requests to retrieve or send data to remote servers in an easy and efficient way. The Fetch API provides a more powerful and flexible feature set compared to older technologies like XMLHttpRequest.
Making GET requests
This code sample demonstrates how to make a GET request to retrieve data from a specified URL and then process the response as JSON.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Making POST requests
This code sample shows how to make a POST request to send JSON data to a server and then handle the JSON response.
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Handling HTTP errors
This code sample illustrates how to handle HTTP errors by checking the response status before processing the response.
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Axios is a popular HTTP client for the browser and Node.js. It provides a promise-based API and has a similar feature set to whatwg-fetch, including interceptors, automatic transforms for JSON data, and cancellation. Axios is often preferred for its more convenient error handling and wider browser support without polyfills.
node-fetch is a light-weight module that brings the Fetch API to Node.js. It is similar to whatwg-fetch but is specifically designed for Node.js environments. It provides a simple interface for making HTTP requests and is a drop-in replacement for native fetch in Node.js.
Ky is a tiny and elegant HTTP client based on the Fetch API. It extends the capabilities of fetch with additional features like retrying failed requests, timeout handling, and more convenient methods for parsing responses. Ky is designed to offer a more developer-friendly API compared to whatwg-fetch.
This project adheres to the [Open Code of Conduct][code-of-conduct]. By participating, you are expected to uphold this code. [code-of-conduct]: http://todogroup.org/opencodeofconduct/#fetch/opensource@github.com
The global fetch
function is an easier way to make web requests and handle
responses than using an XMLHttpRequest. This polyfill is written as closely as
possible to the standard Fetch specification at https://fetch.spec.whatwg.org.
Available on Bower as fetch.
$ bower install fetch
You'll also need a Promise polyfill for older browsers.
$ bower install es6-promise
This can also be installed with npm
.
$ npm install whatwg-fetch --save
For a node.js implementation, try node-fetch.
For use with webpack, refer to Using WebPack with shims and polyfills.
The fetch
function supports any HTTP method. We'll focus on GET and POST
example requests.
fetch('/users.html')
.then(function(response) {
return response.text()
}).then(function(body) {
document.body.innerHTML = body
})
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)
})
fetch('/users.json').then(function(response) {
console.log(response.headers.get('Content-Type'))
console.log(response.headers.get('Date'))
console.log(response.status)
console.log(response.statusText)
})
var form = document.querySelector('form')
fetch('/users', {
method: 'post',
body: new FormData(form)
})
fetch('/users', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'Hubot',
login: 'hubot',
})
})
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
})
The fetch
specification differs from jQuery.ajax()
in mainly two ways that
bear keeping in mind:
The Promise returned from fetch()
won't reject on HTTP error status
even if the response is a HTTP 404 or 500. Instead, it will resolve normally,
and it will only reject on network failure, or if anything prevented the
request from completing.
By default, fetch
won't send any cookies to the server, resulting in
unauthenticated requests if the site relies on maintaining a user session.
To have fetch
Promise reject on HTTP error statuses, i.e. on any non-2xx
status, define a custom response handler:
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response
} else {
var error = new Error(response.statusText)
error.response = response
throw error
}
}
function parseJSON(response) {
return response.json()
}
fetch('/users')
.then(checkStatus)
.then(parseJSON)
.then(function(data) {
console.log('request succeeded with JSON response', data)
}).catch(function(error) {
console.log('request failed', error)
})
To automatically send cookies for the current domain, the credentials
option
must be provided:
fetch('/users', {
credentials: 'same-origin'
})
This option makes fetch
behave similar to XMLHttpRequest with regards to
cookies. Otherwise, cookies won't get sent, resulting in these requests not
preserving the authentication session.
Use the include
value to send cookies in a cross-origin resource sharing (CORS) request.
fetch('https://example.com:1234/users', {
credentials: 'include'
})
Like with XMLHttpRequest, the Set-Cookie
response header returned from the
server is a forbidden header name and therefore can't be programatically
read with response.headers.get()
. Instead, it's the browser's responsibility
to handle new cookies being set (if applicable to the current URL). Unless they
are HTTP-only, new cookies will be available through document.cookie
.
Due to limitations of XMLHttpRequest, the response.url
value might not be
reliable after HTTP redirects on older browsers.
The solution is to configure the server to set the response HTTP header
X-Request-URL
to the current URL after any redirect that might have happened.
It should be safe to set it unconditionally.
# Ruby on Rails controller example
response.headers['X-Request-URL'] = request.url
This server workaround is necessary if you need reliable response.url
in
Firefox < 32, Chrome < 37, Safari, or IE.
Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | 6.1+ ✔ |
FAQs
A window.fetch polyfill.
The npm package whatwg-fetch receives a total of 9,526,001 weekly downloads. As such, whatwg-fetch popularity was classified as popular.
We found that whatwg-fetch demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.