Ember-fetch

HTML5 fetch polyfill from github wrapped and bundled for ember-cli users

• intro to fetch
• spec
• usage
• origin repo

Installation

• ember install ember-fetch

Usage

import fetch from 'fetch';
import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return fetch('/my-cool-end-point.json').then(function(response) {
      return response.json();
    });
  }
});

Use with Ember Data

To have Ember Data utilize fetch instead of jQuery.ajax to make calls to your backend, extend your project's application adapter with the adapter-fetch mixin.

// app/adapters/application.js
import DS from 'ember-data';
import AdapterFetch from 'ember-fetch/mixins/adapter-fetch';

export default DS.RESTAdapter.extend(AdapterFetch, {
  ...
});

Configuration

This addon provides fetch in fastboot. The default fetch module is node-fetch, which uses node http or https underneath. If your app require different communication protocal on server side. You can disable using node-fetch by setting following config value in ember-cli-build.js to be true. Without setting this value means using node-fetch for server side fetch.

let app = new EmberAddon(defaults, {
    'ember-fetch': {
      disableDefaultNodeFetch: true
    }

further docs: https://github.com/github/fetch

Browser Support

• evergreen / IE10+ / Safari 6.1+ https://github.com/github/fetch#browser-support

does this replace ic-ajax?

• ideally yes, but only if you cater to IE9+
• for basic drop-in compat import ajax from 'ember-fetch/ajax'

What about all the run-loop and promise mixing details?

• taken care of for you

why is this wrapper needed?

• original emits a global
• original requires a Promise polyfill (ember users have RSVP)
• original isn't Ember run-loop aware

Won't this wrapper get out-of-sync?

• we actually don't bundle github/fetch rather we merely wrap/transform what comes from node_modules, so we should be resilient to changes assuming semver from the fetch module