$http.get 不适用于使用 then() 函数的 REST 模型

Question

众所周知，Angular 最近弃用了 http.get.success,error 函数。因此，不再建议在您的控制器中使用这种调用：

$http.get("/myurl").success(function(data){
    myctrl.myobj = data;
}));

而是要使用这种调用：

$http.get("/myurl").then(
    function(data) {
        myctrl.myobj = data;
    },
    function(error) {
        ...
    }

问题是，简单的 Spring REST 模型不适用于此新代码。我最近下载了一个带有上述旧成功函数和这样的 REST 模型的示例代码：

@RequestMapping("/resource")
public Map<String,Object> home() {
    Map<String,Object> model = new HashMap<String,Object>();
    model.put("id", UUID.randomUUID().toString());
    model.put("content", "Hello World");
    return model;
}

这应该为$http.get() 调用返回一个类似{id:<someid>, content:"Hello World"} 的地图，但它什么也没收到 - 视图是空白的。

我该如何解决这个问题？

Answer 1

传递给success() 的第一个（四个）参数是响应的数据（即正文）。

但是传递给then() 的第一个（也是唯一的）参数不是数据。它是完整的 HTTP 响应，包含数据、标头、状态、配置。

所以你真正需要的是

$http.get("/myurl").then(
    function(response) {
        myctrl.myobj = response.data;
    },
    function(error) {
        ...
    });

Answer 2

对结果的期望不同。它是响应而不是直接的数据对象。

documentation 说：

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

响应的属性是

data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.

由于需要数据对象，

请将代码转换为

$http.get("/resource").then(
    function(response) {
        myctrl.myobj = response.data;
    });

Answer 3

then 必须返回一个新的 Promise，所以你应该使用 defers 来处理它。

var myApp = angular.module('myApp', []);

myApp.factory('modelFromFactory', function($q) {
return {

        getModel: function(data) {
      var deferred = $q.defer();
      var items = [];
          items.push({"id":"f77e3886-976b-4f38-b84d-ae4d322759d4","content":"Hello World"});
      deferred.resolve(items);
      return deferred.promise;
  }
};
});

function MyCtrl($scope,  modelFromFactory) {
modelFromFactory.getModel()
    .then(function(data){
        $scope.model = data;
})

}

这是工作小提琴 -> https://jsfiddle.net/o16kg9p4/7/