npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2020 – Ryan Hefner

ember-fetch

v8.0.1

Published

HTML5 Fetch polyfill (as an ember-addon)

Downloads

399,587

Readme

ember-fetch

Build Status Build status Ember Observer Score npm version

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

Installation

  • ember install ember-fetch

ember-fetch requries ember-cli 2.13 or above.

Usage

import Route from '@ember/routing/route';
import fetch from 'fetch';

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

Available imports:

import fetch, { Headers, Request, Response, AbortController } from 'fetch';

Use with TypeScript

To use ember-fetch with TypeScript or enable editor's type support, You can add "fetch": ["node_modules/ember-fetch"] to your tsconfig.json.

{
  "compilerOptions": {
    "paths": {
      "fetch": [
        "node_modules/ember-fetch"
      ]
    }
  }
}

Use with Ember Data

[email protected] was released with built-in fetch support, if your ember-data is below 3.9.2, please checkout ember-fetch v7.x.

Use with Fastboot

relative url

ember-fetch uses node-fetch in Fastboot, which doesn't allow relative URL.

url should be an absolute url, such as https://example.com/. A path-relative URL (/file/under/root) or protocol-relative URL (//can-be-http-or-https.com/) will result in a rejected promise.

However, ember-fetch grabs the protocol and host info from fastboot request after the instance-initializes. This allows you to make a relative URL request unless the app is not initialized, e.g. initializers and app.js.

top-level addon

For addon authors, if the addon supports Fastboot mode, ember-fetch should also be listed as a peer dependency. This is because Fastboot only invokes top-level addon's updateFastBootManifest (detail), thus ember-fetch has to be a top-level addon installed by the host app.

Allow native fetch

ember-fetch allows access to native fetch in browser through a build config flag:

// ember-cli-build.js
let app = new EmberAddon(defaults, {
  // Add options here
  'ember-fetch': {
    preferNative: true
  }
});

If set to true, the fetch polyfill will be skipped if native fetch is available, otherwise the polyfilled fetch will be installed during the first pass of the vendor js file.

If set to false, the polyfilled fetch will replace native fetch be there or not.

If all your browser targets support native fetch, and preferNative: true, the polyfill will not be included in the output build. If, for some reason, you still need the polyfill to be included in the bundle, you can set alwaysIncludePolyfill: true.

The way you do import remains same.

Error Handling

A fetch response is successful if response.ok is true, otherwise you can read the status code to determine the bad response type. fetch will only reject with network errors.

ember-fetch provides some utility functions:

  • isBadRequestResponse (400)
  • isUnauthorizedResponse (401)
  • isForbiddenResponse (403)
  • isNotFoundResponse (404)
  • isConflictResponse (409)
  • isGoneResponse (410)
  • isInvalidResponse (422)
  • isServerErrorResponse (5XX)
  • isAbortError Aborted network error
import Route from '@ember/routing/route';
import fetch from 'fetch';
import {
  isAbortError,
  isServerErrorResponse,
  isUnauthorizedResponse
} from 'ember-fetch/errors';

export default Route.extend({
  model() {
    return fetch('/omg.json')
      .then(function(response) {
        if (response.ok) {
          return response.json();
        } else if (isUnauthorizedResponse(response)) {
          // handle 401 response
        } else if (isServerErrorResponse(response)) {
          // handle 5xx respones
        }
      })
      .catch(function(error) {
        if (isAbortError(error)) {
          // handle aborted network error
        }
        // handle network error
      });
  }
});

Browser Support

Q & A

Does it work with pretender?

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