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:

• Jake Archibald's poppycock
• MDN Fetch guide
• WHATWG Fetch specification

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

• github-fastboot-example

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.