sourcecode

Angular delferred 상태를 가져오시겠습니까?

copyscript 2023. 3. 5. 10:18
반응형

Angular delferred 상태를 가져오시겠습니까?

jQuery가 지연되면 다음과 같이 현재 상태를 확인할 수 있습니다.

var defer = $.Deferred();
defer.state();  //Returns the state of the deferred, eg 'resolved'

Angular deferred에 대해서도 같은 방법을 사용할 수 있습니까?(또는 더 나은 약속)

업데이트:

$q의 리팩터링으로 인해 문서화되어 있지 않지만 다음과 같은 작업이 가능합니다.

promise.$$state.status === 0 // pending
promise.$$state.status === 1 // resolved
promise.$$state.status === 2 // rejected

오리지널:

대부분의 약속 라이브러리(Bluebird, Q, when, RSVP 등)와 달리 $q는 동기 검사 API를 노출하지 않습니다.

외부에서 이를 달성할 방법은 없습니다.

전화하셔야 합니다..then그 핸들러의 약속과 코드는 약속이 이행될 때 실행됩니다.

당신의 질문에 대한 답은 "네, 방법이 있어요"입니다.다른 답변은 의 기본 제공 제한에 대해 자세히 설명합니다. 단, 서비스의 데코레이터 기능을 사용하면 상태 속성을 쉽게 추가할 수 있습니다.

  $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지연된 각 개체와 함께 자동으로 생성되는 콜백...이는 각도가 내부에서 작동하는 방식이기 때문에 예상된 것입니다.]

약속은 지연으로 만들어지면 안 되고 아피스에서 돌아오는 약속으로 묶여있어야 하기 때문에 이것은 효과가 없을 것이다.

이 코드는 지연된 모든 것을 장식합니다(따라서).promiseobject)를 지정합니다., $q를 사용하는 API는 자동으로 속성으로 장식됩니다.따라서 사용방법에 관계없이$q이 솔루션은 API를 사용하든 단독으로 사용하든 상관없이deferred오브젝트 및promise그리고 나는 그것을 증명하기 위해 플렁크를 제공했다.


생산 가치가 있습니까?

이 접근방식은 유닛테스트가능하며 이미 사용하고 있는 어플리케이션이 파손되지 않음을 보증하며 나중에 다른 데코레이터를 추가할 수 있다는 점에서 유연합니다.$q오래된 것을 변경하지 않고.

갱신일 :

유감스럽게도, 이것은, 다음의 서버에서는 가능하지 않은 것 같습니다.$qthen★★★★★★ 。

myPromise()
.then(function() {
    // everything in here resolved
},
function() {
    // everything in here rejected
},
function() {
    // everything in here pending (with progress back)
});

기타:

각이 Q 입니다.$q비슷해요.

은 앵글에서 을 얻습니다.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 : 488선 48488 :

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) + "%");
});

저는 Gil과 Travis의 답변에서 영감을 얻어 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;
        }]);
    }
})();

언급URL : https://stackoverflow.com/questions/24091513/get-state-of-angular-deferred

반응형