Right way to make AJAX GET and POST calls in EmberJS

Question

I've started working on EmberJS and I absolutely love it. It does have a learning curve but I believe it has fundamentally very meaningful principles.

My questions is how to make GET and POST calls in Ember JS. I understand that there are models / store, but models (in my opinion) would be to only a particular entity's attributes.

Any thoughts on the following questions would be great.

1. USER A send friend request to USER B. Should there be a "Request"
   model? And do I just make a POST request?

2. Some arbitrary data needs to be returned for the page. Not
   particularly of a model. Should I still make a model for that?
   For use a simple GET request?

3. User needs to update this profile photo. How can the file
   to be uploaded, be set as a model attribute?

How should I go about making regular GET and POST calls (if I am to do them at all). Just use jQuery's $.ajax() or is there another way. I also found a service ember-ajax which has extended the $.ajax into a promises style.

Any thoughts would be much appreciated.

Long live EmberJS :)

ykaragol · Accepted Answer · 2016-12-13 12:27:07Z

4

First option: You can use ember-data. It has customizations such as serializers or adapters.

Second option: You can use addons like ember-ajax.

Our usage is just using jQuery's ajax(). We wrote a service that just wraps jquery.ajax() and use it everywhere in our code. We believe that it gives us a flexibility of writing different kind of queries. We don't have any model of ember-data.

Sample -pseudo- code:

  export default Ember.Service.extend({
    doPostCall(target, data, options=null){
       //consider cloning options with Ember.$.extend
       var requestOptions= options || {};
       requestOptions.url=target;
       requestOptions.type='POST';
       requestOptions.data=JSON.stringify(data);
       doRemoteCall(requestOptions);
    },

    doGetCall(target, data=null, options=null){
       //consider cloning options with Ember.$.extend
       var requestOptions=options || {};
       requestOptions.url=target;
       requestOptions.type='GET';
       requestOptions.data=data;
       doRemoteCall(requestOptions);
    },

    doRemoteCall(requestOptions){
      //assign default values in here:
      //  such as contentType, dataType, withCredentials...

      Ember.$.ajax(requestOptions)
        .then(function(data) {
            Ember.run(null, resolve, data);
         }, function(jqXHR , textStatus, errorThrown) {
            jqXHR.then = null;
            Ember.run(null, reject, jqXHR, textStatus, errorThrown);
         });
    }
  });

PS: By the way, if you need to run your app in server-side (with fastboot), you cannot use jQuery. So use ember-network.

edited Dec 13, 2016 at 12:27

answered Dec 13, 2016 at 8:53

ykaragol

6,2413 gold badges32 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

IAMZERG Over a year ago

I like it. Do you ever find yourself missing the serializers and adapters with this approach?

ykaragol Over a year ago

No, never. Because I don't have any model. Very rarely, I miss model, but any Ember.Object is enough for us.

miguel.camba · Accepted Answer · 2016-12-13 18:33:40Z

3

If you are performing CRUD operations over models, ember-data is nice. In most apps, CRUD operations account for ~90% of requests.

There is occasions where an app needs to make requests that not ideal for ember-data, and that is where ember-ajax enters the game. It allows you to do requests like you'd do with just jQuery, with the nice addition that requests are done though a service that has some extension points to allow to customize things like headers that are used app-wide, which is more complex with just raw jquery.

If your app is going to run in fastboot, you should use ember-network, because it works both in the browser and in node, while jquery/ember-ajax does don't.

answered Dec 13, 2016 at 18:33

miguel.camba

1,8271 gold badge15 silver badges20 bronze badges

Comments

Ember Freak · Accepted Answer · 2018-07-25 13:22:33Z

1

Current best practise would be ember-fetch. since ember-network is deprecated in favor of ember-fetch.

You can just install ember-fetch addon by running the below command,

ember install ember-fetch

and then just import fetch and you are good to use fetch method.

import fetch from 'fetch';
import Ember from 'ember';

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

answered Jul 25, 2018 at 13:22

Ember Freak

12.9k5 gold badges26 silver badges55 bronze badges

Collectives™ on Stack Overflow

Right way to make AJAX GET and POST calls in EmberJS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related