AngularJSのngResourceモジュールをRestangularに置き換えてみた

いなば

2015.05.14

Web制作

Restangularの便利な機能

Restangularの便利な機能をご紹介します。

setBaseUrl

Angularのconfigでリクエスト先のベースとなるURLを指定することができます。

angular.module('config').config([
    'RestangularProvider',
    'ApiUrlConstant',
    function(RestangularProvider,ApiUrlConstant){
        // APIのベースURL
        RestangularProvider.setBaseUrl(ApiUrlConstant.host);
    }
]);

エンドポイントごとに個別に設定もできます。
このエンドポイントだけバージョンが違うといったときなどに使えます。

angular.module('services').factory('MemberModel', [
    'Restangular',
    'ApiUrlConstant',
    function (Restangular,ApiUrlConstant) {
        // http://private-3124d-test3708.apiary-mock.com/v2/membersにリクエストが飛ぶ
        var account = Restangular.withConfig(function(RestangularConfigurer) {
            RestangularConfigurer.setBaseUrl(ApiUrlConstant.host + 'v2');
        }).all(ApiUrlConstant.member);
        return account;
    }
]);

addResponseInterceptor

Restangularを介して行った通信のレスポンスをインターセプト（傍受）してデータの整形などの処理をはさむことができます。

angular.module('config').config([
    'RestangularProvider',
    'ApiUrlConstant',
    function(RestangularProvider,ApiUrlConstant){

        // APIのベースURL
        RestangularProvider.setBaseUrl(ApiUrlConstant.host);

        RestangularProvider.addResponseInterceptor(function (data, operation, what, url, response, deferred) {

            var extractedData;
            if (operation === "getList") {  // getListを実行したときのレスポンスで返ってきたオブジェクトを整形する
                if (data.list) {
                    extractedData = data.list || [];
                    extractedData.total = data.total;
                } else {
                    extractedData = data;
                }
            } else {
                extractedData = data;
            }
            return extractedData;
        });
    }
]);

APIから返ってきているデータ構造を、

{
    "total": 3,
    "list": [
        {/* 省略 */},
        {/* 省略 */},
        {/* 省略 */}
    ]
}

このように整形しています。

[
    {/* 省略 */},
    {/* 省略 */},
    {/* 省略 */},
    "total": 3
]

addRequestInterceptor

addResponseInterceptorの反対でRestangularを介して行った通信のリクエストを、インターセプト（傍受）して処理をはさむことができます。

angular.module('config').run([
    'Restangular',
    function(Restangular){
        Restangular.addFullRequestInterceptor(function (element, operation, route, url, headers, params, httpConfig) {
            if (/*なんらかの条件*/) {
                params.hoge = 'hoge';   // パラメータに変更を加える
            }
            return {
                headers: headers,
                params: params,
                element: element,
                httpConfig: httpConfig
            };
        });

    }
]);

setErrorInterceptor

サンプルコード

setErrorInterceptorはRestangularを介して行った通信でエラーが発生した際にインターセプトして処理を挟むことができます。
デモでは、statusが404で返ってきた場合に404ページへとリダイレクトをしています。（memberのidが5のときに意図的に404を返すようにしてあります）

angular.module('config').run([
    '$location',
    'Restangular',
    function($location,Restangular){
        Restangular.setErrorInterceptor(
            function (response, deferred, responseHandler) {
                if (response.status == 404) {
                    console.log("Resource not available...");
                    $location.path('/notFound');
                } else {
                    console.log("Response received with HTTP error code: " + response.status );
                }
                console.log(response, deferred, responseHandler);

                //return false; // stop the promise chain
            }
        );
    }
]);

setErrorInterceptorのハマりどころとして、CORS（Cross-Origin Resource Sharing）の場合に500番台エラー時のstatusが0になるので注意が必要です。

最初なぜ検知されないのかわからなかったのですが、よく見たらドキュメントに記載がありました。。

https://github.com/mgonto/restangular#restangular-fails-with-status-code-0