Получить состояние Angular отсрочено?
С отложенными jQuery я привык проверять текущее состояние следующим образом:
var defer = $.Deferred();
defer.state(); //Returns the state of the deferred, eg 'resolved'
Есть ли способ сделать то же самое для Angular отложенных? (или даже лучше promises)
Ответы
Ответ 1
Обновление
Благодаря рефакторингу $q это возможно, хотя и не документировано:
promise.$$state.status === 0 // pending
promise.$$state.status === 1 // resolved
promise.$$state.status === 2 // rejected
Оригинал
В отличие от большинства библиотек обещаний (Bluebird, Q, когда, RSVP и т.д.), $q не предоставляет API синхронной проверки.
Нет никакого способа добиться этого извне.
Вы должны называть .then
обещанием и кодом в том, что обработчик будет выполняться при выполнении обещания.
Ответ 2
Ответ на ваш вопрос: да, есть способ. Другие ответы прекрасно охватывают встроенные ограничения $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
-instantiated отложенные и обещающие будут иметь свойство state
со значением, ожидающим выполнения, выполненным или отклоненным.
Скептически?
вы эффективно модифицируете $q, обертывая каждый отложенный другим отложенным
На самом деле это не так. $q
оригинальный конструктор defer()
вызывается ровно один раз. Он просто украшен дополнительными функциями, внутренне прикрепляя обработчик событий через then
. [Обратите внимание, что дополнительный объект defer
создается в результате дополнительного обратного вызова then
, который автоматически создается с каждым отложенным объектом..., что следует ожидать, потому что это как angular работает внутри.]
это не сработает, потому что promises не должен создаваться с отсрочкой, а цепочкой из promises, которые возвращаются из apis
Обратите внимание, что этот код будет украшать каждый отложенный (и, следовательно, объект promise
), который создается службой $q
. Это означает, что любой API, который использует $q, будет автоматически украшен свойством state
. Поэтому, независимо от того, как вы используете $q
, независимо от того, с каким API или на нем, это решение украшает как объект deferred
, так и promise
, и я предоставил plunk, чтобы доказать это.
Производство достойное?
Этот подход проверен на единицу, он гарантированно не разорвет любое приложение, уже использующее $q
, а гибкое в том смысле, что позже вы можете добавить дополнительные декораторы к $q
без изменения старого (-ов).
Ответ 3
Обновлено:
К сожалению, это не похоже на возможность с $q
. Вам нужно будет поместить этот код в свой метод then
.
myPromise()
.then(function() {
// everything in here resolved
},
function() {
// everything in here rejected
},
function() {
// everything in here pending (with progress back)
});
Другое:
Это для библиотеки Q не angular $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 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 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) + "%");
});
Ответ 4
Я взломал решение, вдохновленное ответами Гила и Трэвиса, которое украшает конструктор 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;
}]);
}
})();