我最近开始从Bootstrap 3升级到Bootstrap 4,这还要求我也从AngularJS 1.5.8升级到最低AngularJS 1.6.1。我有一个简单的AngularJS / MVC应用程序,具有以下代码设置:
/scripts/app.js(包含路由) /scripts/controllers.js(包含控制器,方法调用等) /scripts/services.js(包含命中C#控制器并带回数据或“执行操作”的回叫方法(CRUD方法)
在我的controllers.js中,我有一个方法:
function init() {
api.initialIndexLoad(
function(result) {
if (result.error) {
notificationService.danger("<h5>An error occurred.</h5><h6>Details: {0}</h6>".format(result.error));
} else {
vm.dataList = result.theDataFromCSharp;
}
vm.loaded = true;
}
);
}
init();
这将调用我的services.js,其中包含以下代码:
"use strict";
angular
.module("CustList.services", ["ngResource"])
.service("api",
function api($resource, $http, notificationService) {
function handleError(err, fn) {
if (!fn) {
notificationService.error(err);
} else {
fn(err);
}
}
return {
initialIndexLoad: function(callback, error) {
$http.get("/Customers/InitialIndexLoad")
.success(callback)
.error(function(e) {
handleError(e, error);
});
}
};
}
);
因此,当然,在将我的库更新为AngularJS 1.6.1(实际上,我直接使用AngularJS 1.7.5)之后,我开始出现错误,并在一段时间后发现promise语法已更改。因此,我尝试进行更改,并将我的services.js更新为:
"use strict";
angular
.module("CustList.services", ["ngResource"])
.service("api",
function api($resource, $http, notificationService) {
function handleSuccess(response) {
return response.data;
}
function handleError(err, fn) {
if (!fn) {
notificationService.error(err);
} else {
fn(err);
}
}
return {
initialIndexLoad: function() {
$http
.get("/Customers/InitialIndexLoad")
.then(handleSuccess)
.catch(handleError);
}
};
}
);
错误消失了,我以为我完成了这次升级,直到意识到:我实际上并没有找回数据!我创建的新的handleSuccess
方法正在获取响应中的数据,但是return response.data
并没有将数据返回给我的controllers.js方法,因此我可以将其插入{{1 }}。
它不会引发错误-它什么都不做。非常感谢帮助您解决此问题!
答案 0 :(得分:2)
服务方法需要return $http
个承诺。
app.service("api",
function api($http, notificationService) {
function handleSuccess(response) {
return response.data;
}
function handleError(err) {
notificationService.error(err);
throw err;
}
return {
initialIndexLoad: function() {
̶$̶h̶t̶t̶p̶
return $http
.get("/Customers/InitialIndexLoad")
.then(handleSuccess)
.catch(handleError);
}
};
}
);
请注意,errorHandler
需要re-throw错误。否则,处理程序会将被拒绝的承诺转换为已实现的承诺。
控制器需要使用.then
和.catch
方法:
function init() {
var promise = api.initialIndexLoad();
promise.then(function(result) {
if (result.error) {
notificationService.danger("<h5>An error occurred.</h5><h6>Details: {0}</h6>".format(result.error));
} else {
vm.dataList = result.theDataFromCSharp;
}
vm.loaded = true;
}).catch(functions(err) {
console.log(err);
throw err;
});
}
.then
方法返回一个新承诺,该新承诺通过successCallback
,errorCallback
的返回值来解决或拒绝(除非该值是一个promise) ,在这种情况下,将使用promise chaining使用该承诺中解析的值进行解析。
有关更多信息,请参见
答案 1 :(得分:0)
返回initialIndexLoad内部
如此
return $http
.get("/Customers/InitialIndexLoad")
.then(handleSuccess)
.catch(handleError);
会猜对了,也许在重构/升级过程中会丢失。