在服务中处理 $http 响应 [英] Processing $http response in service
问题描述
我最近在这里发布了我面临的问题的详细描述在 SO.由于我无法发送实际的 $http
请求,我使用超时来模拟异步行为.在@Gloopy 的帮助下,从我的模型到视图的数据绑定工作正常
I recently posted a detailed description of the issue I am facing here at SO. As I couldn't send an actual $http
request, I used timeout to simulate asynchronous behavior. Data binding from my model to view is working correct, with the help of @Gloopy
现在,当我使用 $http
而不是 $timeout
(在本地测试)时,我可以看到异步请求成功并且 data
在我的服务中充满了 json 响应.但是,我的观点没有更新.
Now, when I use $http
instead of $timeout
(tested locally), I could see the asynchronous request was successful and data
is filled with json response in my service. But, my view is not updating.
更新 Plunkr 此处
推荐答案
这里有一个 Plunk 可以满足您的需求:http://plnkr.co/edit/TTlbSv?p=preview
Here is a Plunk that does what you want: http://plnkr.co/edit/TTlbSv?p=preview
我们的想法是直接使用 Promise 及其then"函数来操作和访问异步返回的响应.
The idea is that you work with promises directly and their "then" functions to manipulate and access the asynchronously returned responses.
app.factory('myService', function($http) {
var myService = {
async: function() {
// $http returns a promise, which has a then function, which also returns a promise
var promise = $http.get('test.json').then(function (response) {
// The then function here is an opportunity to modify the response
console.log(response);
// The return value gets picked up by the then in the controller.
return response.data;
});
// Return the promise to the controller
return promise;
}
};
return myService;
});
app.controller('MainCtrl', function( myService,$scope) {
// Call the async method and then do stuff with what is returned inside our own then function
myService.async().then(function(d) {
$scope.data = d;
});
});
这里有一个稍微复杂一点的版本,它缓存请求,所以你只在第一次创建它(http://plnkr.co/edit/2yH1F4IMZlMS8QsV9rHv?p=preview):
Here is a slightly more complicated version that caches the request so you only make it first time (http://plnkr.co/edit/2yH1F4IMZlMS8QsV9rHv?p=preview):
app.factory('myService', function($http) {
var promise;
var myService = {
async: function() {
if ( !promise ) {
// $http returns a promise, which has a then function, which also returns a promise
promise = $http.get('test.json').then(function (response) {
// The then function here is an opportunity to modify the response
console.log(response);
// The return value gets picked up by the then in the controller.
return response.data;
});
}
// Return the promise to the controller
return promise;
}
};
return myService;
});
app.controller('MainCtrl', function( myService,$scope) {
$scope.clearData = function() {
$scope.data = {};
};
$scope.getData = function() {
// Call the async method and then do stuff with what is returned inside our own then function
myService.async().then(function(d) {
$scope.data = d;
});
};
});
这篇关于在服务中处理 $http 响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!