initial example

app/adapters/foo.js

@@ -0,0 +1,16 @@
+import RESTAdapter from '@ember-data/adapter/rest';
+import fetch from 'fetch';
+import { AJAXError } from '../utils/errors';
+
+export default class FooAdapter extends RESTAdapter {
+  ajax(path, method) {
+    return fetch(path, { method })
+      .then(response => {
+        if (response.ok) {
+          return response.json();
+        } else {
+          throw new AJAXError(response.statusText)
+        }
+      })
+  }
+}

app/components/my-component.hbs

@@ -0,0 +1,7 @@
+Foo: {{@foo.name}}
+
+{{#unless this.isSaved}}
+  <button type="button" {{on "click" this.save}}>
+    Save
+  </button>
+{{/unless}}

app/components/my-component.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class MyComponent extends Component {
+  @tracked isSaving;
+  @tracked isSaved;
+
+  @action
+  save() {
+    this.isSaving = true;
+
+    this.args.onSave()
+      .then(() => {
+        this.isSaved = true;
+      })
+      // .catch(error => {
+      //   No need to catch, because already handled, flash message will be displayed (See services/foo.js)
+      // })
+      .finally(() => {
+        this.isSaving = false;
+      });
+  }
+}

app/controllers/application.js

@@ -0,0 +1,3 @@
+import Controller from '@ember/controller';
+
+export default class ApplicationController extends Controller {}

app/models/foo.js

@@ -0,0 +1,6 @@
+import Model from '@ember-data/model';
+import { attr } from '@ember-data/model';
+
+export default class FooModel extends Model {
+  @attr() name;
+}

app/routes/application.js

@@ -0,0 +1,22 @@
+import Route from '@ember/routing/route';
+import { inject } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class ApplicationRoute extends Route {
+  @inject store;
+  @inject('foo') fooService;
+
+
+  model() {
+    return this.store.findRecord('foo', 1);
+  }
+
+  setupController(controller, model) {
+    controller.foo = model;
+  }
+
+  @action
+  save() {
+    return this.fooService.saveFoo(this.controller.foo)
+  }
+}

app/serializers/foo.js

@@ -0,0 +1,3 @@
+import RESTSerializer from '@ember-data/serializer/rest';
+
+export default class Fooerializer extends RESTSerializer {}

app/services/foo.js

@@ -0,0 +1,18 @@
+import Service, { inject } from '@ember/service';
+
+export default class FooService extends Service {
+  @inject('flash-message') flashMessageService;
+
+  saveFoo(foo) {
+    return foo.save().catch(error => {
+      // 'Handle error'
+      // Make sure if saving a foo fails, then the user always knows about it.
+      this.flashMessageService.add('error', error.message);
+
+      // Rethrow error, so that the `saveFoo` promise chain remains in an error
+      // state. This allows us to determine if `saveFoo` failed or succeeded
+      // later on in the code... (See my-component.js)
+      throw error;
+    });
+  }
+}

app/styles/app.css

@@ -0,0 +1,3 @@
+.flash-message .message__dismiss {
+  display: none;
+}

app/templates/application.hbs

@@ -1,5 +1,5 @@
-{{!-- The following component displays Ember's default welcome message. --}}
-<WelcomePage />
-{{!-- Feel free to remove this! --}}
+<FlashMessages />
 
-{{outlet}}
+<br><br>
+
+<MyComponent @foo={{this.foo}} @onSave={{route-action "save"}} />

app/utils/errors.js

@@ -0,0 +1 @@
+export class AJAXError extends Error {}

app/utils/server.js

@@ -0,0 +1,20 @@
+import Pretender from 'pretender';
+
+const server = new Pretender();
+
+server.prepareBody = JSON.stringify;
+
+server.put('/foos/1', () => [500, {}, {}]);
+
+server.get('/foos/1', () => [
+  200,
+  {},
+  {
+    foo: {
+      id: 1,
+      name: 'Foo 1',
+    },
+  },
+]);
+
+export default server;