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

window.fetch polyfill

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.

Installation

Install with npm.

``sh
$ npm install fetchify --save
`

Usage

The fetch function supports any HTTP method. We'll focus on GET and POST
example requests.

$3

`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;
`

$3

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


`

More examples

$3

`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)
})
`

$3

`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)
})
`

$3

`javascript
var form = document.querySelector('form')

fetch('/query', {
method: 'post',
body: new FormData(form)
})
`

$3

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

$3

`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
})
`

$3

This causes fetch to behave like jQuery's $.ajax by rejecting the Promise
on HTTP failure status codes like 404, 500, etc. The response Promise 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)
})
``

Browser Support

!Chrome | !Firefox | !IE | !Opera | !Safari
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |