A window.fetch JavaScript polyfill designed for Browserify
npm install fetchify#Fetchify
Fetchify is a fork of Github's window.fetch polyfill
It is adapted to be used primarily within Node as part of a Browserify bundle. It is also tested and
pluggable with various Promise implementations such as Bluebird and Q
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.
Install with npm.
``sh`
$ npm install fetchify --save
The fetch function supports any HTTP method. We'll focus on GET and POST
example requests.
`javascript
var Promise = require('bluebird');
var fetch = require('fetchify')(Promise).fetch;
//Headers, Request and Response are also exported
var Headers = require('fetchify')(Promise).Headers;
var Request = require('fetchify')(Promise).Request;
var Response = require('fetchify')(Promise).Response;
fetch('/users.html')
.then(function(response) {
return response.text()
}).then(function(body) {
document.body.innerHTML = body
})
`
You could also use Q
`javascript
var Promise = require('q').Promise;
var fetch = require('fetchify')(Promise).fetch;
`
Fetchify also provides a browser polyfill build (see the dist directory).
If you don't want to globally polyfill a Promise impl, you can also inject it:
`html`
`javascript`
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)
})
`javascript`
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)
})
`javascript
var form = document.querySelector('form')
fetch('/query', {
method: 'post',
body: new FormData(form)
})
`
`javascript`
fetch('/users', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'Hubot',
login: 'hubot',
})
})
`javascript
var input = document.querySelector('input[type="file"]')
var form = new FormData()
form.append('file', input.files[0])
form.append('user', 'hubot')
fetch('/avatars', {
method: 'post',
body: form
})
`
This causes fetch to behave like jQuery's $.ajax by rejecting the PromisePromise
on HTTP failure status codes like 404, 500, etc. The response is
resolved only on successful, 200 level, status codes.
`javascript
function status(response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}
fetch('/users')
.then(status)
.then(json)
.then(function(json) {
console.log('request succeeded with json response', json)
}).catch(function(error) {
console.log('request failed', error)
})
``
!Chrome | !Firefox | !IE | !Opera | !Safari
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |