Registry / devops / ember-ajax-fetch

ember-ajax-fetch

library2.2.2jsnpmunverified

Ember addon that provides a fetch service with an API compatible with ember-ajax. Current version 2.2.2 requires Ember 3.28+ and Node 18+. It is a drop-in replacement using the Fetch API instead of jQuery.ajax, reducing bundle size and improving modern browser compatibility. Release cadence is low; the addon is stable and feature-complete.

devops

npm install ember-ajax-fetch

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · EMBER-AJAX-FETCH

ember-ajax-fetch

devopsjavascriptv2.2.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

fetch

✓ import { inject as service } from '@ember/service'; import fetch from 'ember-ajax-fetch/services/fetch';

✗ import fetch from 'ember-ajax-fetch';

The fetch service must be imported from the specific path 'ember-ajax-fetch/services/fetch'. Default import from the package root does not exist.

AjaxService

✓ import AjaxService from 'ember-ajax-fetch/services/fetch';

✗ import AjaxService from 'ember-ajax/services/ajax';

The service is named 'fetch', but for ember-ajax compatibility you can alias it as AjaxService.

request

✓ const response = await this.get('fetch').request('/api/data');

✗ const response = await this.fetch.request('/api/data');

In classic Ember, use `this.get('fetch')` to access the injected service, not `this.fetch`.

Shows how to inject and use the fetch service in an Ember component, including header customization.

// app/services/fetch.js (optional override) import FetchService from 'ember-ajax-fetch/services/fetch'; export default class MyFetchService extends FetchService { get headers() { return { 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content ?? '' }; } } // Usage in a component: import Component from '@glimmer/component'; import { inject as service } from '@ember/service'; export default class ExampleComponent extends Component { @service fetch; async loadData() { try { const response = await this.fetch.request('/api/posts'); console.log(response); } catch (error) { console.error('Request failed', error); } } }

Debug

Known issues

gotchaThe fetch service imported from 'ember-ajax-fetch/services/fetch' is a default export of a function, not a class. You cannot extend it directly; instead, create a wrapper service.

fix

If you need to extend, import the class from 'ember-ajax-fetch/services/fetch' (it's actually an EmberObject subclass).

affects: >=2.0.0

deprecatedember-ajax-fetch is intended as a replacement for ember-ajax, but ember-ajax itself is deprecated. Use native fetch or ember-ajax-fetch directly.

fix

Replace ember-ajax with ember-ajax-fetch by changing imports to 'ember-ajax-fetch/services/fetch'.

affects: all

gotchaThe `request` method returns the parsed JSON body directly, not a Response object. Errors are thrown as ember-ajax compatible error objects.

fix

Use try/catch to handle errors; check error.status for HTTP status codes.

affects: >=2.0.0

breakingIn v2, the addon no longer supports Ember < 3.28 and Node < 18. Older versions of the addon (v1.x) used different APIs.

fix

Upgrade to Ember 3.28+ and Node 18+.

affects: >=2.0.0

gotchaThe service must be injected using `@service fetch` (Octane) or `service('fetch')` (classic). Using `@service('fetch')` throws an error because the service name is 'fetch'.

fix

Use `@service fetch` without parentheses.

affects: >=2.0.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of undefined (reading 'request')

The fetch service is not injected or is referenced as `this.fetch.request` instead of `this.get('fetch').request`.

fix

Inject with `@service fetch` in Octane or `service('fetch')` in classic, then use `this.fetch.request` in Octane or `this.get('fetch').request` in classic.

Error: Assertion Failed: A helper named 'fetch' could not be found

Conflicting naming with the global `fetch` function or a template helper named 'fetch'.

fix

Avoid naming your service 'fetch' if you also use the global fetch; consider aliasing: `@service('fetch') myFetch`.

TypeError: fetch is not a function

Attempting to use the service as a function instead of calling its methods.

fix

Use `this.fetch.request(url, options)` instead of `this.fetch(url)`.

Upgrade

Version history

2.2.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/RobbieTheWagner/ember-ajax-fetch ↗

packageember-ajax-fetch ↗

homepagehttps://RobbieTheWagner.github.io/ember-ajax-fetch ↗