使用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）。 ， 例如。 這超出了這個問題的范圍，但是對於您近期的探索，僅供參考。

Answer 2

可以使用ember-ajax服務和/或ES2015 請求類

這是一種更新的傳統方式（Ember 2.x）處理API請求和響應，從而響應有效載荷/數據，而不依賴於ember-data，因為ember-ajax ver 2可以直接使用，它意味着取代Ember.$.ajax API。

使用ajax通過公開的服務余燼的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;
      });
    }
  }
});