Ember custom adapter

In an Ember app, the adapter determines how the data is saved to the background, such as the URL format and the request header. Ember Data's default adapter is the built-in REST API callback.

The default adapter is often extended in practice. E mber's position is that different features should be added by extending the adapter, not by adding identities. This makes the code easier to test and understand, and reduces the code for adapters that may need to be extended.

If your back end is using the rules of the Ember convention, you can adapters/application.js T he adapter application priority is higher than the default adapter, but lower than the specified model adapter priority. T he model adapter definition rule adapter-modelName.js For example, the following code defines a model adapter-post

//  app/adapters/adapter-post.js
import Ember from 'ember';
export default DS.JSONAPIAdapter.extend({
    namespace: 'api/v1'
});

At this point, the priority order of the adapter is: JSONAPIAdapter and application the default built-in adapter;

Ember is built-in with the following:

DS. A dapter This adapter is the most basic adapter and does not contain any functionality. If you need to create an adapter that is fundamentally different from the Ember adapter, you can start with this adapter.
DS. JSON APIAdapter This adapter is the default adapter and follows the JSON API specification for interacting JSON data with HTTP servers via XHR.
DS. RESTAdapter this adapter functions the same as the second adapter and was the default adapter until Ember Data 2.0.

1, custom JSON APIAdapter adapter

JSONAPIAdapter typically used to extend non-standard background interfaces.

1, URL specification

JSONAPIAdapter adapter is very intelligent and automatically determines which URL link is that model. For example, if you post need id

this.store.find('post', 1).then(function(post) {
    //  处理post
});

JSONAPIAdapter get /post/1

The following table is a mapping relationship between Action, Request, and URL (since the markdown parser does not support tables on this site, screenshots are used instead directly).

Ember custom adapter

For action find() get and JSONAPIAdapter resolves /posts/1

2, diversified customization

To fit the model property name of the plulu number name, you can bind the alias with Ember Inflector.

let inflector = Ember.Inflector.inflector;
inflector.irregular('formula', 'formulae');
inflector.uncountable('advice');

The purpose of this binding is JSONAPIAdapter Y ou can /formulae/1 /formulas/1 B ut I haven't figured out what this setting means yet. W hat's the use? If the reader knows, ask for advice.

3, break point path customization

Use the namespace prefix the URL.

app/adapters/application.js
import Ember from 'ember';
export default DS.JSONAPIAdapter.extend({
  namespace: 'api/1'
});

Request person automatically /api/1/people/1

4, custom host

By default, the adapter goes under the current domain name. If you want the URL to go to the new domain name you can use the property host settings.

app/adapters/application.js
import Ember from 'ember';
export default DS.JSONAPIAdapter.extend({
  host: 'http://api.example.com'
});

Note: This setting is especially important if your project is using its own background database!!! Property host refers to the address of your server interface.

Request person automatically forwarded to http://api.example.com/people/1

5, custom path

By default, Ember attempts to generate URLs based on the pluluable model class name and the model class name separated by the middle dash. If you need to change this default rule, you can use pathForType setting.

// app/adapters/application.js
import Ember from ‘ember’;
export default DS.JSONAPIAdapter.extend({
  pathForType: function(type) {
    return Ember.String.underscore(type);
  }
});

Modifying the default build path rule is the downline separation. F or example, person person will /person/1 Requesting user-profile turns /user_profile/1 (the default turn to user-profile/1

6, custom request header

Some requests require the request header information to be set, such as API key The header information can be set as a key-value pair, and Ember Data adds this header setting to each request.

app/adapters/application.js
import Ember from 'ember';
export default DS.JSONAPIAdapter.extend({
  headers: {
'API_KEY': 'secret key',
'ANOTHER_HEADER': 'some header value'
  }
});

Even more powerful is that you can header properties in header to dynamically set the request header information. The following code is to set up a session object into the adapter.

app/adapters/application.js
import Ember from ‘ember’;
export default DS.JSONAPIAdapter.extend({
  session: Ember.inject.service(‘session’);
  headers: Ember.computed(‘session.authToken’, function() {
‘API_KEY’: this.get(‘session.authToken’),
‘ANOTHER_HEADER’: ‘some header value’  
  });
});

session very familiar, especially in the control of user login is very widely used, another very useful plug-in, specifically for controlling user login, this plug-in is Ember Simple Auth, there is a blog post on how to use this plug-in to implement user login, see the use of ember-simple-auth to implement The permission control of Ember.js application.

You can also volatile() method to set the calculated property to a non-cached property so that the value in the header is recalculated header is sent.

// app/adapters/application.js
import Ember from ‘ember’;
export default DS.JSONAPIAdapter.extend({
  //  ……
  }).volatile();
});

For more information about adapters, please visit:

For adapters the JSONAPIAdapter if you need to personalize the custom URL or the requested domain name can be configured in the fit. In most cases, however, the default settings are used.

The full code of the blog post is placed in Github (the blog post has been modified several times, and the code on the blog post may be different from the github code, but the impact is small!). I f you think the blog post is a bit useful to you, please give me a star on the star project. Yours is definitely the biggest motivation for me!!

Table of contents