Question

我通过在帖子请求的正文中发送JSON对象来与我交互的API。作为回报，在成功授权后，服务器将在其回复后的主体中使用JSON API提要进行响应。

如何使用Ember.js接收因发送JSON请求而从服务器返回的有效负载？我看到Ember Data和Ember模型允许使用标题，但它看起来不像发送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

某些惯例＆＃39; 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（）文档。）

如何在您的余烬应用中实际使用上述内容的一些示例：

＆＃34;模型钩＆＃34;

在适当的路线定义中，我们会覆盖默认的模型（）方法：

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

要查看模型挂钩，您需要导航到映射到＆＃39; examplePost＆＃39;的路径路径。路由状态通过其关联的URL（，例如，http：/myemberapp.example.com /＃/ examplePost ）。因为我们的 App.examplePost（）执行的ajax调用最终会返回已实现的Promise上的API数据（请参阅 success（）函数），模型钩子知道使用该函数响应作为其模型对象（并且它知道如何使用promises异步执行此操作）。

A＆＃34;静态对象＆＃34;控制器

更加人为的例子是覆盖默认的 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代码，你想要将jquery的promise对象转换为标准 promise对象（例如，参见promises.org）通过 Ember.Deferred.promise（）。这超出了这个问题的范围，但是对于您近期的探索，仅供参考。

Answer 2

可以使用 ember-ajax服务和/或ES2015 request class

这是一种更新的传统方式（Ember 2.x）处理API请求和响应，从而响应有效载荷/数据，而不依赖于余烬数据，ember-ajax ver 2可以直接使用，它意味着要替换Ember.$.ajax API。

使用通过ember-ajax/services/ajax公开的ajax服务，可以发送请求并处理响应：

import Ember from 'ember';

export default Ember.Controller.extend({
  ajax: Ember.inject.service(),
  actions: {
    someAction(someObject) {
      let payload = { foo: Ember.get(someObject, 'someProperty') };
      this.get('ajax').post('/url', {
        data: payload
      }).then(({ response }) => {
        ...
        // handle response;
      });
    }
  }
});

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

2 个答案:

＆＃34;模型钩＆＃34;

A＆＃34;静态对象＆＃34;控制器