我发现很难理解“延迟反模式”。我认为我原则上理解它,但我没有看到一个超级简单的例子,一个服务,一个不同的承诺和一个反模式,所以我想我会尝试自己做但看到我不是超级了解它我先得到一些澄清。
我在工厂(SomeFactory)中有以下内容:
//url = 'data.json';
return {
getData: function(){
var deferred = $q.defer();
$http.get(destinationFactory.url)
.then(function (response) {
if (typeof response.data === 'object') {
deferred.resolve(response.data);
} else {
return deferred.reject(response.data);
}
})
.catch(function (error) {
deferred.reject(error);
});
return deferred.promise;
}
我检查其对象的原因只是在$http.get()
上添加一个简单的验证层
以下,在我的指示中:
this.var = SomeFactory.getData()
.then(function(response) {
//some variable = response;
})
.catch(function(response) {
//Do error handling here
});
现在我的理解是,这是一个反模式。因为原始的延期承诺会捕获错误并简单地吞下它。它不会返回错误,所以当调用这个“getData”方法时,我还有另外一个catch来获取错误。
如果这不是反模式,那么有人可以解释为什么两者都要求各种“回调”吗?当我第一次开始写这个工厂/指令时,我预计必须在某个地方做一个默认的承诺,但我没想到双方都要.catch()
(也就是我有点想我可以让工厂返回如果我做了SomeFactory.getData()
答案 0 :(得分:21)
这是“延期反模式”吗?
是的,确实如此。 '延迟反模式'在创建新的冗余延迟对象以从承诺链内部解析时发生。在您的情况下,您使用$ q来返回隐含返回承诺的承诺。你已经拥有一个Promise对象($http service
本身返回一个promise
),所以你只需要返回它!
这是一个超简单的例子,说明具有延迟承诺的服务和具有反模式的服务,
这是反模式
app.factory("SomeFactory",['$http','$q']){ return { getData: function(){ var deferred = $q.defer(); $http.get(destinationFactory.url) .then(function (response) { deferred.resolve(response.data); }) .catch(function (error) { deferred.reject(error); }); return deferred.promise; } } }])
这是你应该做的
app.factory("SomeFactory",['$http']){
return {
getData: function(){
//$http itself returns a promise
return $http.get(destinationFactory.url);
}
}
虽然他们都以同样的方式消费。
this.var = SomeFactory.getData()
.then(function(response) {
//some variable = response;
},function(response) {
//Do error handling here
});
任何一个例子(至少语法上)都没有错。但是第一个是多余的...而且不需要!
希望有所帮助:)
答案 1 :(得分:8)
我会说它是经典延迟反模式,因为你正在创建不必要的延迟对象。但是,您正在为链添加一些值(通过验证)。通常情况下,IMO,当创建延迟对象时,反模式特别糟糕。
因此,代码可以更简单。
$q
promises有一个记录的功能,可以自动包装在promise中的promise中返回的任何内容(使用$q.when
)。在大多数情况下,这意味着您不必手动创建延迟:
var deferred = $q.defer();
然而,这就是文档演示如何使用$q
的承诺。
因此,您可以将代码更改为:
return {
getData: function(){
return $http.get(destinationFactory.url)
.then(function (response) {
if (typeof response.data === 'object') {
return response.data;
} else {
throw new Error('Error message here');
}
});
// no need to catch and just re-throw
});
}
答案 2 :(得分:0)
ANTI-PATTERN
vm.download = function() { var url = "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"; return $q(function(resolve, reject) { var req = { method: 'POST', url: url, responseType: 'arraybuffer' }; $http(req).then(function(response) { resolve(response.data); }, function(error) { reject(error); }); }); }
正确
vm.download = function() {
var url = "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf";
var req = {
method: 'POST',
url: url,
responseType: 'arraybuffer'
};
return $http(req).then(function(response) {
return response.data;
});
}
$ http服务已经返回了一个承诺。不需要使用$q constructor,而且容易出错。