使用Ember.js从发布请求接收服务器响应中的JSON API

Question

我有一个API,通过在post请求的主体中发送JSON对象来与之交互.作为回报,在成功授权后,服务器将在其响应后的主体中使用JSON API提要进行响应.

如何通过发送JSON请求使用Ember.js接收从服务器返回的有效负载？我看到Ember Data和Ember模型允许使用标题,但它看起来不像发送POST主体的能力.

这是我需要发送服务器以便在post响应中接收JSON API的JSON示例.

{
    "auth": {
        "type" : "basic",
        "password": "xxx",
        "username": "someone"
    },
    "requestId" : 15,
    "method": {
        "name": "getUserAvailabilityAndInfo",
        "params": {
            "userId" : "000",
            "peopleOnly" : "1"
        }
    }
}

Answer 1

我不能权威地说ember-data(虽然我知道足以断言它肯定支持HTTP POST动词),除了引用文档:

如果没有任何配置,Ember Data可以通过RESTful JSON API加载和保存记录及其关系,前提是它遵循某些约定.

如果您需要将Ember.js应用程序与不遵循强约定的现有JSON API集成,则Ember Data可以轻松配置为与服务器返回的任何数据一起使用.

请参见http://emberjs.com/guides/models

Ember Data上面提到的"某些约定"是一个移动目标,但Ember团队接近于最终编纂(见jsonapi.org).

也来自那个文档:

对于简单的应用程序,您可以使用jQuery从服务器加载JSON数据,然后将这些JSON对象用作模型.

我将演示如何做到这一点.

最简单的入门方法是在你的ember代码库中的任何地方使用Ember包含的jQuery.ajax()方法:

App.examplePost = function () {
    return Em.$.ajax('http://example.com/api/serviceXYZ', {
        "type": 'POST', // HTTP method
        "dataType": 'JSON', // type of data expected from the API response
        "data": { // Begin data payload
            "auth": {
                "type" : "basic",
                "password": "xxx",
                "username": "someone"
            },
            "requestId" : 15,
            "method": {
                "name": "getUserAvailabilityAndInfo",
                "params": {
                    "userId" : "000",
                    "peopleOnly" : "1"
                }
            }
        }, // End data payload
        "success": function (data, textStatus, jqXHR) {
            return data;
        },
        "error": function (jqXHR, textStatus, errorThrown) {
            window.console.log(jqXHR);
        }
    });
};

(有关上述内容的更多详细信息,请参阅标准jquery ajax()文档.)

有关如何在您的ember应用中实际使用上述内容的一些示例:

"模型钩"

在适当的路由定义中,我们将覆盖默认的model()方法:

App.ExamplePostRoute = Ember.Route.extend({
    model: function (params) {
        return App.examplePost();
    }
});

要查看模型挂钩的操作,您将导航到通过其关联的URL(例如,http:/myemberapp.example.com /#/ examplePost)映射到"examplePost"路由状态的路径路径.因为我们的App.examplePost()执行的ajax调用最终在完成的Promise上返回API数据(参见success()函数),所以模型钩子知道将该响应用作其模型对象(并且它知道如何异步执行此操作)使用承诺).

"静态对象"控制器

一个更加人为的例子是覆盖默认的setupController()方法,也在路由定义中.

App.ExamplePostRoute = Ember.Route.extend({
    setupController: function (controller, model) {
        return App.examplePost().then(
            function (data) {
                controller.set(model, data);
            }
        );
    }
});

该setupController路线方法(它总是叫,你是否过渡到通过URL或其他过渡方法的路由状态)不不知道的承诺,因此.那么()以上使用.

同样,每次进入路线状态时,您通常不会静态加载文字模型,但这是一种入门方式,并且使用Chrome Ember Inspector,将帮助您证明实际上这可以工作!此外,jquery和promises是一个复杂的主题,实际上如果你推出了自己的客户端API代码,你需要通过Ember.Deferred.promise()将jquery的promise对象转换为标准的 promise对象(请参阅promises.org)., 例如.这超出了这个问题的范围,但是对于您近期的探索,仅供参考.