AJAX promise without Ember Data

前端 未结 3 912
夕颜
夕颜 2020-12-07 15:00

I have decided to not use ember-data as it\'s not production ready and still changing. My app only needs to make a few ajax requests anyway so it shouldn\'t make too big of

3条回答
  •  萌比男神i
    2020-12-07 15:36

    Actually the answer is quite easy: You do not need to use a promise. Instead just return an empty object. Your code could look like this:

    App.User.reopenClass({
        getCurrentUser: function() {
            var user = App.User.create({}); //create an empty object
            $.ajax({
                url: "/api/get_current_user",
                type: "POST",
                data: JSON.stringify({})
            }).then(function(response) {
                user.setProperties(response); //fill the object with your JSON response
            });
            return user;
        }
    });
    

    What is happening here?

    1. You create an empty object.
    2. You make an asynchronous call to your API...
    3. ... and in your success callback you fill your empty object.
    4. You return your user object.

    Note: What is really happening? The flow mentioned above is not the sequence in which those actions are happening. In reality the points 1,2 and 4 are performed first. Then some time later, when the response returns from your server, 3 is executed. So the real flow of actions is: 1 -> 2 -> 4 -> 3.

    So the general rule is to always return an object that enables Ember to do its logic. No values will be displayed first in your case and once your object is filled Ember will start do its magic and auto update your templates. No hard work needs to be done on your side!


    Going beyond the initial question: How would one do this with an array? Following this general rule, you would return an empty array. Here a little example, which assumes, that you might like to get all users from your backend:

    App.User.reopenClass({
        getAllUsers: function() {
            var users = []; //create an empty array
            $.ajax({
                url: "/api/get_users",
            }).then(function(response) {
                response.forEach(function(user){
                    var model = App.User.create(user); 
                    users.addObject(model); //fill your array step by step
                });
            });
            return users;
        }
    });
    

提交回复
热议问题