This repository has been archived by the owner. It is now read-only.
Universal fetch() polyfill (FastBoot and browser) for Ember apps
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
assets
config
public
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.gitignore
.jshintrc
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
appveyor.yml
bower.json
ember-cli-build.js
index.js
package.json
testem.json

README.md

ember-network

🔥 Deprecation Notice 🔥

ember-network is deprecated in favor of ember-fetch.

Originally, ember-network was created to contain implementations of multiple networking primitives that worked in both the browser and Node.js. However, given the rapid adoption of the WHATWG Fetch and FastBoot's built-in support for the jQuery AJAX-like najax, there is little reason for ember-network to continue to exist.

You should be able to seamlessly switch to ember-fetch, which uses the same underlying fetch polyfills.

Ember Network provides low-level networking primitives that work both in the browser and in Node.js via FastBoot.

Usage

Currently, Ember Network implements the WHATWG Fetch standard. Other standards may be implemented in the future.

Fetch

import Route from "ember-route";
import fetch from "ember-network/fetch";

export default Route.extend({
  model() {
    return fetch('https://api.github.com/users/tomdale/events')
      .then(function(response) {
        return response.json();
      });
  }
});

For more information on using fetch(), see:

To see a very simple example app using FastBoot and Ember Network, see:

Testing

Testing requires a new approach because existing tools like Pretender and Mirage rely on ajax and XMLHttpRequest. Newer browsers have the fetch command built in, therefore mocking it is a bit different.

Firstly remove local reference from your fetch import statement:

import 'ember-network/fetch';

Because we will be mocking the global fetch, having a local reference will miss out on the mocked version. Now we are ready for mocking:

npm install fetch-mock
ember install ember-browserify

Now, inside of any acceptance tests, you can mock any network traffic with ease:

// ...
import fetchMock from 'npm:fetch-mock';

// ...

test('visiting /', function(assert) {
  fetchMock.get('/users/1', {
    'data': {
      'type': 'user',
      'id': '1',
      'attributes': {
        // ...
      }
    }
  });

  visit('/');
  
  // ...
});

How It Works

At build time, Ember Network detects if the build target is FastBoot or the browser. For FastBoot, it swaps in the node-fetch library. For the browser, it swaps in GitHub's fetch polyfill. (The browser polyfill will use the native window.fetch() if available.) The appropriate version will appear in your vendor.js file.

If you'd like to write an Ember addon that does something similar, please see the annotated index.js file.