无烬数据AJAX承诺 [英] AJAX promise without Ember Data

查看:97
本文介绍了无烬数据AJAX承诺的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经决定不使用烬数据,因为它不是生产做好准备,仍在变化。我的应用程序只需要做一些Ajax请求反正所以它不应该太大的差别。我无法理解如何处理一个Ajax响应的承诺。

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 a difference. I am having trouble understanding how to handle an ajax promise response.

在我的用户加载应用程序,他们已经有一个验证会话。我试图ping通用户信息的服务器,并在我的模板显示。看来我的模板在我的Ajax请求返回结果呈现,然后不承诺更新。

When my user loads the app they already have an authenticated session. I am trying to ping the server for that users info and display it in my template. It seems my template is rendered before my ajax request returns results and then does not update with the promise.

// route
App.ApplicationRoute = Ember.Route.extend({
    setupController: function(){
        this.set("currentUser", App.User.getCurrentUser());
    }
});


// model
App.User = Ember.Object.extend({
    email_address: '',
    name_first: '',
    name_last: '',
    name_full: function() {
        return this.get('name_first') + ' ' + this.get('name_last');
    }.property('name_first', 'name_last')
});
App.User.reopenClass({
    getCurrentUser: function() {
        return $.ajax({
            url: "/api/get_current_user",
            type: "POST",
            data: JSON.stringify({})
        }).then(function(response) {
            return response;
        });
    }
});

在我的模板:

<h1> Hey, {{App.currentUser.name_first}}</h1>

我怎么会当我收到响应或延迟渲染,直到我有一个响应更新模板?

How would I update the template when I receive a response or delay rendering until I have a response?

推荐答案

其实答案很简单:你并不需要使用的承诺。而不是仅仅返回一个空的对象。您code可能是这样的:

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

这是怎么回事?


  1. 您创建一个空对象

  2. 您进行异步调用您的API ...

  3. ...和在您的成功回调你填写你空对象。

  4. 您返回用户对象。

注意:什么是真正发生的事情上述流程是不是在这些行动正在发生的顺序。在现实中,点1,2和4被首先执行。然后,一段时间后,当响应从服务器返回,3个被执行。 这样的行动,真正的流程是:1 - > 2 - > 4 - > 3

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

这篇关于无烬数据AJAX承诺的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆