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

我有一个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"
        }
    }
}

解决方法:

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

Without any configuration, Ember Data can load and save records and their relationships served via a RESTful JSON API, provided it follows certain conventions.

If you need to integrate your Ember.js app with existing JSON APIs that do not follow strong conventions, Ember Data is designed to be easily configurable to work with whatever data your server returns.

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

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

也来自那个文档：

For simple applications, you can get by using jQuery to load JSON data from a server, then use those JSON objects as models.

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

最简单的入门方法是在你的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或其他转换方法转换到路由状态,总是被调用)不知道promises,因此上面的.then()用法.

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

标签：javascript,ajax,ember-js,ember-data
来源： https://codeday.me/bug/20190722/1507218.html