동기 http 콜(angular)JS

동기 http 콜(angular)JS

다음과 같은 시나리오가 있습니다.특정 URL의 데이터가 필요합니다.파라미터 'url'을 사용하는 함수를 작성했습니다.함수 안에는 $http가 있습니다.URL 에 콜을 발신하는 메서드를 취득합니다.데이터는 호출 함수로 반환됩니다.

var getData = function (url) {
    var data = "";

    $http.get(url)
        .success( function(response, status, headers, config) {
             data = response;
        })
        .error(function(errResp) {
             console.log("error fetching url");
        });
    return data;
}

문제는 다음과 같습니다.$ httpget은 비동기이며 응답을 가져오기 전에 함수가 반환됩니다.따라서 호출 함수는 데이터를 빈 문자열로 가져옵니다.URL에서 데이터를 가져올 때까지 함수를 강제로 되돌리지 않도록 하려면 어떻게 해야 합니까?

이러한 문제들을 극복하겠다는 약속을 보세요. 왜냐하면 그것들은 구석진 세계 곳곳에서 사용되고 있기 때문입니다.

$q를 사용해야 합니다.

var getData = function (url) {
    var data = "";
    var deferred = $q.defer();

    $http.get(url)
        .success( function(response, status, headers, config) {
             deferred.resolve(response);
        })
        .error(function(errResp) {
             deferred.reject({ message: "Really bad" });
        });
    return deferred.promise;
}

여기 약속과 $q에 대한 좋은 기사가 있습니다.

갱신:

참고로 서비스 자체가 약속을 돌려주니까$q이 시나리오에서는 반드시 필요한 것은 아닙니다(따라서 안티 패턴).

하지만 이것이 $q와 약속에 대한 읽기를 건너뛰는 이유가 되지 않도록 하세요.

따라서 위의 코드는 다음과 같습니다.

var getData = function (url) {
    var data = "";
    return $http.get(url);
}

$q.all() 메서드를 사용하여 이 문제를 해결할 수도 있습니다.

var requestPromise = [];

var getData = function (url) {
    var data = "";

    var httpPromise = $http.get(url)
        .success( function(response, status, headers, config) {
             data = response;
        })
        .error(function(errResp) {
             console.log("error fetching url");
        });

    requestPromise.push(httpPromise);
}

호출함수에서

$q.all(requestPromise).then(function(data) {

    //this is entered only after http.get is successful
});

의존관계로서 $q를 주입하는 것을 확인합니다.도움이 되었으면 좋겠다

기능이 중복된 것 같습니다.그냥 사용하다$http.get(url)어차피 사용하기 전에는 아무것도 하지 않으니까요.

var url = 'foo/bar';

$http
    .get(url)
    .success( function(response, status, headers, config) {
        $scope.data = response;
    })
    .error(function(errResp) {
        console.log("error fetching url");
    });

또는 나중에 약속에 액세스해야 할 경우 해당 약속을 변수에 할당하십시오.

var promise = $http.get(url);

// some other code..

promise.then(function(data){
   //.. do something with data
});

원하는 작업을 수행하는 일반적인 방법은 다음과 같습니다.

var getData = function(url, callback) {
    $http.get(url).success(function(response) {
        callback && callback(response);
    });
};

사용방법:

getData('/endpoint', function(data) {
    console.log(data);
});

언급URL : https://stackoverflow.com/questions/31509452/synchronous-http-call-in-angularjs