The 'unfetch' npm package is a lightweight polyfill for the Fetch API, which allows you to make HTTP requests in environments where the Fetch API is not natively available, such as older browsers or certain JavaScript environments. It is designed to be minimal and efficient, providing the essential functionality of the Fetch API without any additional overhead.
Basic Fetch Request
This feature demonstrates how to make a basic HTTP GET request using 'unfetch'. The response is then converted to JSON and logged to the console.
const fetch = require('unfetch');
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));POST Request
This feature demonstrates how to make an HTTP POST request using 'unfetch'. The request includes headers and a JSON body, and the response is processed similarly to the GET request.
const fetch = require('unfetch');
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 Errors
This feature demonstrates how to handle errors in a fetch request using 'unfetch'. It checks if the response is not ok and throws an error, which is then caught and logged.
const fetch = require('unfetch');
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('Fetch error:', error));'node-fetch' is a popular package that provides a Fetch API implementation for Node.js environments. It is more feature-rich compared to 'unfetch' and supports additional functionalities like streaming and handling of complex request/response scenarios.
'axios' is a promise-based HTTP client for the browser and Node.js. It offers a more comprehensive set of features compared to 'unfetch', including request and response interceptors, automatic JSON data transformation, and support for canceling requests.
'isomorphic-fetch' is a package that brings the Fetch API to both client and server environments, making it suitable for universal (isomorphic) JavaScript applications. It is similar to 'unfetch' but aims to provide a consistent API across different environments.
Tiny 500b fetch "barely-polyfill"
fetch() with headers and text/json responsesPromise is polyfilled of course!)🤔 What's Missing?
- Uses simple Arrays instead of Iterables, since Arrays are iterables
- No streaming, just Promisifies existing XMLHttpRequest response bodies
- Use in Node.JS is handled by isomorphic-unfetch
npm i unfetch
Otherwise, grab it from unpkg.com/unfetch.
This automatically "installs" unfetch as window.fetch() if it detects Fetch isn't supported:
import 'unfetch/polyfill'
// fetch is now available globally!
fetch('/foo.json')
.then( r => r.json() )
.then( data => console.log(data) )
This polyfill version is particularly useful for hotlinking from unpkg:
<script src="https://unpkg.com/unfetch/polyfill"></script>
<script>
// now our page can use fetch!
fetch('/foo')
</script>
With a module bundler like rollup or webpack, you can import unfetch to use in your code without modifying any globals:
// using JS Modules:
import fetch from 'unfetch'
// or using CommonJS:
const fetch = require('unfetch')
// usage:
fetch('/foo.json')
.then( r => r.json() )
.then( data => console.log(data) )
The above will always return unfetch(). (even if window.fetch exists!)
There's also a UMD bundle available as unfetch/dist/unfetch.umd.js, which doesn't automatically install itself as window.fetch.
// simple GET request:
fetch('/foo')
.then( r => r.text() )
.then( txt => console.log(txt) )
// complex POST request with JSON, headers:
fetch('/bear', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ hungry: true })
}).then( r => {
open(r.headers.get('location'));
return r.json();
})
While one of Unfetch's goals is to provide a familiar interface, its API may differ from other fetch polyfills/ponyfills.
One of the key differences is that Unfetch focuses on implementing the fetch() API, while offering minimal (yet functional) support to the other sections of the Fetch spec, like the Headers class or the Response class.
Unfetch's API is organized as follows:
fetch(url: string, options: Object)This function is the heart of Unfetch. It will fetch resources from url according to the given options, returning a Promise that will eventually resolve to the response.
Unfetch will account for the following properties in options:
method: Indicates the request method to be performed on the
target resource (The most common ones being GET, POST, PUT, PATCH, HEAD, OPTIONS or DELETE).headers: An Object containing additional information to be sent with the request, e.g. { 'Content-Type': 'application/json' } to indicate a JSON-typed request body.credentials: ⚠ Accepts a "include" string, which will allow both CORS and same origin requests to work with cookies. As pointed in the 'Caveats' section, Unfetch won't send or receive cookies otherwise. The "same-origin" value is not supported. ⚠body: The content to be transmitted in request's body. Common content types include FormData, JSON, Blob, ArrayBuffer or plain text.response Methods and AttributesThese methods are used to handle the response accordingly in your Promise chain. Instead of implementing full spec-compliant Response Class functionality, Unfetch provides the following methods and attributes:
response.okReturns true if the request received a status in the OK range (200-299).
response.statusContains the status code of the response, e.g. 404 for a not found resource, 200 for a success.
response.statusTextA message related to the status attribute, e.g. OK for a status 200.
response.clone()Will return another Object with the same shape and content as response.
response.text(), response.json(), response.blob()Will return the response content as plain text, JSON and Blob, respectively.
response.headersAgain, Unfetch doesn't implement a full spec-compliant Headers Class, emulating some of the Map-like functionality through its own functions:
headers.keys: Returns an Array containing the key for every header in the response.headers.entries: Returns an Array containing the [key, value] pairs for every Header in the response.headers.get(key): Returns the value associated with the given key.headers.has(key): Returns a boolean asserting the existence of a value for the given key among the response headers.Adapted from the GitHub fetch polyfill readme.
The fetch specification differs from jQuery.ajax() in mainly two ways that
bear keeping in mind:
fetch won't send or receive any cookies from the server,
resulting in unauthenticated requests if the site relies on maintaining a user
session.fetch('/users', {
credentials: 'include'
});
The Promise returned from fetch() won't reject on HTTP error status
even if the response is an 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.
To have fetch Promise reject on HTTP error statuses, i.e. on any non-2xx
status, define a custom response handler:
fetch('/users')
.then(response => {
if (response.ok) {
return response;
}
// convert non-2xx HTTP responses into errors:
const error = new Error(response.statusText);
error.response = response;
return Promise.reject(error);
})
.then(response => response.json())
.then(data => {
console.log(data);
});
First off, thanks for taking the time to contribute! Now, take a moment to be sure your contributions make sense to everyone else.
Found a problem? Want a new feature? First of all see if your issue or idea has already been reported. If it hasn't, just open a new clear and descriptive issue.
Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.
💁 Remember: size is the #1 priority.
Every byte counts! PR's can't be merged if they increase the output size much.
git clone https://github.com/<your-username>/unfetchcd unfetchgit checkout -b my-new-featurenpm installnpm run build to verify your change doesn't increase output size.npm test to make sure your change doesn't break anything.git commit -am 'Add some feature'git push origin my-new-featureFAQs
Bare minimum fetch polyfill in 500 bytes
The npm package unfetch receives a total of 3,853,309 weekly downloads. As such, unfetch popularity was classified as popular.
We found that unfetch demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.