web-dev-qa-db-ja.com

AngularJS 1.2でHTTP応答ステータスコードを取得する方法

AngularJS 1.2rc（x）でngResourceを使用して、ステータスコードを取得するにはどうすればよいですか？

_RestAPI.save({resource}, {data}, function( response, responseHeaders ) {
});
_

ここで、RestAPIは私のngResourceです。

応答には_$promise_オブジェクトとサーバーから返されたリソースが含まれていますが、ステータスは含まれていません。 responseHeaders()関数は、サーバーがヘッダーオブジェクトにステータスコードを挿入した場合にのみステータスを持ちますが、真の戻りステータスコードは持ちません。そのため、一部のサーバーがサービスを提供する場合と提供しない場合があります。

angularjshttpresponseresponse-headers
25
Eddie Monge Jr

$resource呼び出しの後に、promissコールバックthen、catchおよびfinallyを使用できます。

例えば。呼び出し後にエラーをキャッチしたい場合は、次のようにします。

RestAPI.save({resource}, {data}, callbackFunction).$promise.catch(function(response) {
    //this will be fired upon error
    if(response.status == 500) alert('Something baaad happend');
}).then(function() {
    //this will be fired upon success
});

responseオブジェクトには、statusおよびstatusTextプロパティがあります。 statusは整数のステータスコードであり、statusTextはテキストです。サーバー応答を含むdataプロパティもあります。

編集：提案されたように、それはresponse.statusでした

13
Bardiel W. Thirtytwo

リソース宣言内にインターセプターを追加する必要があります。このような：

var resource = $resource(url, {}, {
    get: {
        method: 'GET'
        interceptor: {
            response: function(response) {      
                var result = response.resource;        
                result.$status = response.status;
                return result;
            }
        }
    }                            
});

使用法：

resource.get(params, function(result) {
    console.log(result.$status)
});

IMOステータスコードはデフォルトで提供されているはずです。これには問題があります https://github.com/angular/angular.js/issues/8341

12
Ara Yeressian

新しいバージョンのAngularを使用している人にとっては、transformResponse関数への3番目のパラメータとしてステータスコードにアクセスしたように見えます since angular 1. 、しかし、それは $ resource ドキュメントに適切に文書化されていませんでした。

4
qix

次のような応答ステータスを取得できます。

$http.get(url).then(function(response){
  console.log(response.status); //successful status like OK
}, function(response){
  console.log(response.status); //error status like 400-Bad Request
})
3
Hai Nguyen

responseHeaders()関数は応答のヘッダーのみを返すことに同意しましたが、それをカスタマイズすることができ、とにかく便利です。

1。

あなたの問題を解決します。以下で：（_$$service_は$ resourceインスタンスです。）

_var serve = new $$service();
serve.id = "hello_wrongPath"; // wrong path,will return 404
serve.$get()
    .then(function (data) {
        console.log("~~~hi~~~");
        console.log(data);
        return data;
    })
    .catch(function (error) {
        console.log("~~~error~~~");
        console.log(error);
        console.log(error.status); // --> 404
        console.log(error.statusText); // --> "Not Found"
        console.log(error.config.timeout); // --> 5000
        console.log(error.config.method); // --> GET
        console.log(error.config.url); // --> request url
        console.log(error.headers("content-type"));// --> "text/plain"
        return error.$promise;
    })
    .finally(function(data){
        console.log("~~~finally~~~");
        console.log(data); // --> undefined
    });
_

このように、uはERROR応答でstatus,statusText,timeout,method,headers(same with responseHeaders)のみをキャッチできます。

2。

成功応答で応答の詳細を表示する場合は、次のようなインターセプターを使用しました。

_ng.module("baseInterceptor", [])
    .factory("baseInterceptor", ["$q", function ($q) {
        return {
            'request': function (config) {
                console.info(config);
                //set timeout for all request
                config.timeout = 5000;
                return config;
            },
            'requestError': function (rejection) {
                console.info(rejection);
                return $q.reject(rejection);
            },
            'response': function (response) {
                console.log("~~interceptor response success~~");
                console.log(response);
                console.log(response.status);
                console.log(response.config.url);
                return response;
            },
            'responseError': function (rejection) {
                console.log("~~interceptor response error~~");
                console.log(rejection);
                console.log(rejection.status);
                return $q.reject(rejection);
            }
        };
    }]);
_

そしてインターセプターをモジュールに追加します：

_.config(["$httpProvider", function ($httpProvider) {
    $httpProvider.interceptors.Push("baseInterceptor");
}])
_
3
soytian

正しい答えは、バーディエルとアラの答えの組み合わせだと思います。

リソース宣言内にインターセプターを追加した後。このような：

var resource = $resource(url, {}, {
    get: {
        method: 'GET'
        interceptor: {
            response: function(response) {      
                var result = response.resource;        
                result.$status = response.status;
                return result;
            }
        }
    }                            
});

以下のように使用します。

RestAPI.save()
.query(function(response) {
    // This will return status code from API like 200, 201 etc
    console.log(response.$status);
})
.$promise.catch(function(response) {
    // This will return status code from server side like 404, 500 etc
    console.log(response.status);
});
0
Mario Shtika

私はAngularJS v1.5.6を使用していますが、このようにします（私の場合、サービス内に「getData」メソッドを配置します）：

function getData(url) {
    return $q(function (resolve, reject) {
        $http.get(url).then(success, error);

        function success(response) {
            resolve(response);
        }
        function error(err) {
            reject(err);
        }
    });
}

次に、コントローラで（たとえば）、次のように呼び出します：

function sendGetRequest() {
    var promise = service.getData("someUrlGetService");
    promise.then(function(response) {
        //do something with the response data
        console.log(response.data);
    }, function(response) {
        //do something with the error
        console.log('Error status: ' + response.status);
    });
}

ドキュメントにあるように、応答オブジェクトには次のプロパティがあります。

  • data – {string | Object} –変換関数で変換された応答本文。
  • status – {number} –応答のHTTPステータスコード。
  • headers – {function（[headerName]）} –ヘッダーゲッター関数。
  • config – {Object} –要求の生成に使用された構成オブジェクト。
  • statusText – {string} –応答のHTTPステータステキスト。

https://docs.angularjs.org/api/ng/service/$http を参照してください

それが役に立てば幸い！

0
pcsantana