Получить состояние Angular отложено?
С помощью jQuery deferreds я привык проверять текущее состояние следующим образом:
var defer = $.Deferred();
defer.state(); //Returns the state of the deferred, eg 'resolved'
Есть ли способ сделать то же самое для угловых отсрочек? (или даже лучше обещания)
4 ответа
Обновление:
Из-за рефакторинга $q это теперь возможно, хотя и не документировано:
promise.$$state.status === 0 // pending
promise.$$state.status === 1 // resolved
promise.$$state.status === 2 // rejected
Оригинал:
В отличие от большинства библиотек обещаний (Bluebird,Q, when, RSVP и т. Д.), $ Q не предоставляет API синхронной проверки.
Нет способа добиться этого извне.
Вы должны позвонить .then на обещании и код в этом обработчике будет выполняться, когда обещание выполнится.
Ответ на ваш вопрос: да, есть способ. Другие ответы хорошо охватывают встроенные ограничения $q, Тем не менее, легко добавить свойство состояния к $q используя $provide функция декоратора службы.
$provide.decorator('$q', function ($delegate) {
var defer = $delegate.defer;
$delegate.defer = function() {
var deferred = defer();
deferred.promise.state = deferred.state = 'pending';
deferred.promise.then(function() {
deferred.promise.state = deferred.state = 'fulfilled';
}, function () {
deferred.promise.state = deferred.state = 'rejected';
});
return deferred;
};
return $delegate;
});
Поместите этот декоратор внутри config блок, и все $q Отложенные и обещанные объекты будут иметь state собственность со значением, ожидающим, выполненным или отклоненным.
Проверь это
Скептически?
вы эффективно изменяете саму $q, оборачивая каждую отложенную другую другой отложенной
На самом деле это не так. $q оригинал defer() конструктор вызывается ровно один раз. Он просто украшен дополнительными функциями путем внутреннего подключения обработчика событий через then, [Обратите внимание, что дополнительный defer объект создается в результате дополнительного then обратный вызов, который автоматически создается с каждым отложенным объектом... что и следовало ожидать, потому что именно так angular работает внутри.]
это не сработает, потому что обещания не должны создаваться с отсрочкой, а должны быть связаны с обещаниями, возвращаемыми из API-интерфейса.
Обратите внимание, что этот код будет украшать каждый отложенный (и, следовательно, promise объект), который создается $q оказание услуг. Это означает, что любой API, который использует $q, будет автоматически украшен state собственность Так что независимо от того, как вы используете $q будь то с каким-либо API или самостоятельно, это решение украшает как deferred объект и promise и я предоставил планку, чтобы доказать это.
Производство достойное?
Этот подход является модульным тестированием, он гарантированно не сломает ни одно приложение, уже использующее $q и это гибко в том смысле, что вы можете позже добавить дополнительные декораторы $q без изменения старых.
Обновлено:
К сожалению, это не выглядит возможным с $q, Вы должны будете поместить этот код в свой then метод.
myPromise()
.then(function() {
// everything in here resolved
},
function() {
// everything in here rejected
},
function() {
// everything in here pending (with progress back)
});
Другой:
Это для библиотеки Q не угловой $q но похоже.
Angular вдохновлен Q библиотека, проверьте источник, на самом деле это не так страшно. https://github.com/kriskowal/q/blob/v1/q.js
Ты можешь использовать myPromise.inspect().state имеются ['pending', 'rejected', 'fulfilled']
У вас также есть:
myPromise.isFulfilled();
myPromise.isPending();
myPromise.isRejected();
Проверьте этот JSfiddle и откройте консоль для зарегистрированных результатов. http://jsfiddle.net/S6LzP/
Более гранулированный, глядя на defer функция на линии 488:
function defer() {
// if "messages" is an "Array", that indicates that the promise has not yet
// been resolved. If it is "undefined", it has been resolved. Each
// element of the messages array is itself an array of complete arguments to
// forward to the resolved promise. We coerce the resolution value to a
// promise using the `resolve` function because it handles both fully
// non-thenable values and other thenables gracefully.
var messages = [], progressListeners = [], resolvedPromise;
var deferred = object_create(defer.prototype);
var promise = object_create(Promise.prototype);
promise.promiseDispatch = function (resolve, op, operands) {
var args = array_slice(arguments);
if (messages) {
messages.push(args);
if (op === "when" && operands[1]) { // progress operand
progressListeners.push(operands[1]);
}
} else {
nextTick(function () {
resolvedPromise.promiseDispatch.apply(resolvedPromise, args);
});
}
};
// XXX deprecated
promise.valueOf = function () {
if (messages) {
return promise;
}
var nearerValue = nearer(resolvedPromise);
if (isPromise(nearerValue)) {
resolvedPromise = nearerValue; // shorten chain
}
return nearerValue;
};
promise.inspect = function () {
if (!resolvedPromise) {
return { state: "pending" };
}
return resolvedPromise.inspect();
};
if (Q.longStackSupport && hasStacks) {
try {
throw new Error();
} catch (e) {
// NOTE: don't try to use `Error.captureStackTrace` or transfer the
// accessor around; that causes memory leaks as per GH-111. Just
// reify the stack trace as a string ASAP.
//
// At the same time, cut off the first line; it's always just
// "[object Promise]\n", as per the `toString`.
promise.stack = e.stack.substring(e.stack.indexOf("\n") + 1);
}
}
// NOTE: we do the checks for `resolvedPromise` in each method, instead of
// consolidating them into `become`, since otherwise we'd create new
// promises with the lines `become(whatever(value))`. See e.g. GH-252.
function become(newPromise) {
resolvedPromise = newPromise;
promise.source = newPromise;
array_reduce(messages, function (undefined, message) {
nextTick(function () {
newPromise.promiseDispatch.apply(newPromise, message);
});
}, void 0);
messages = void 0;
progressListeners = void 0;
}
deferred.promise = promise;
deferred.resolve = function (value) {
if (resolvedPromise) {
return;
}
become(Q(value));
};
deferred.fulfill = function (value) {
if (resolvedPromise) {
return;
}
become(fulfill(value));
};
deferred.reject = function (reason) {
if (resolvedPromise) {
return;
}
become(reject(reason));
};
deferred.notify = function (progress) {
if (resolvedPromise) {
return;
}
array_reduce(progressListeners, function (undefined, progressListener) {
nextTick(function () {
progressListener(progress);
});
}, void 0);
};
return deferred;
}
В основном это метод в самом низу deferred.notify,
Пример использования:
function requestOkText(url) {
var request = new XMLHttpRequest();
var deferred = Q.defer();
request.open("GET", url, true);
request.onload = onload;
request.onerror = onerror;
request.onprogress = onprogress;
request.send();
function onload() {
if (request.status === 200) {
deferred.resolve(request.responseText);
} else {
deferred.reject(new Error("Status code was " + request.status));
}
}
function onerror() {
deferred.reject(new Error("Can't XHR " + JSON.stringify(url)));
}
function onprogress(event) {
deferred.notify(event.loaded / event.total);
}
return deferred.promise;
}
requestOkText("http://localhost:3000")
.then(function (responseText) {
// If the HTTP response returns 200 OK, log the response text.
console.log(responseText);
}, function (error) {
// If there's an error or a non-200 status code, log the error.
console.error(error);
}, function (progress) {
// Log the progress as it comes in.
console.log("Request progress: " + Math.round(progress * 100) + "%");
});
Я придумал решение, вдохновленное ответами Гила и Трэвиса, которое украшает конструктор Promise методами, более близкими к реализации Q.
Обратите внимание, что это украшение опирается на Promise.$$state, Это было построено для Angular 1.6.4, и теоретически должно работать вплоть до 1.3.x, но нет никаких гарантий для этого или будущих выпусков:
(function() {
'use strict';
angular
.module('your.module.name.goes.here')
.config(configBlock);
/** @ngInject */
configBlock.$inject = ['$provide'];
function configBlock($provide) {
$provide.decorator('$q', ['$delegate', function ($delegate) {
console.log($delegate);
var Promise = $delegate.prototype.constructor;
Promise.prototype.inspect = function () {
var inspect = {};
switch (this.$$state.status) {
case -1:
case 0:
inspect.state = 'pending';
break;
case 1:
inspect.state = 'fulfilled';
break;
case 2:
inspect.state = 'rejected';
break;
default:
inpsect.state = 'unknown';
}
return inspect;
};
Promise.prototype.isFulfilled = function () {
return this.inspect().state === 'fulfilled';
}
Promise.isFulfilled = function (obj) {
if (obj.constructor !== Promise) {
return true;
}
return obj.isFulfilled();
}
Promise.prototype.isRejected = function () {
return this.inspect().state === 'rejected';
}
Promise.isRejected = function (obj) {
if (obj.constructor !== Promise) {
return false;
}
return obj.isRejected();
}
Promise.prototype.isPending = function () {
return this.inspect().state === 'pending';
}
Promise.isPending = function (obj) {
if (obj.constructor !== Promise) {
return false;
}
return obj.isPending();
}
return $delegate;
}]);
}
})();