Right way to make AJAX GET and POST calls in EmberJS

问题

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 :)

回答1:

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.

回答2:

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.

回答3:

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();
    });
  }
});

来源：https://stackoverflow.com/questions/41115025/right-way-to-make-ajax-get-and-post-calls-in-emberjs

标签

javascript

jquery

ajax

ember.js

ember-model