AngularJSコードサンプル（http interceptor）

wp-admin

7年前

AngularJS : 1.6.5
Bootstrap : 3.3.7
　
※v1.2.3のサンプルはこちら。
　

（１）$httpサービスのInterceptor

レスポンスデータ

№	名前	年齢	住所
{{item.id}}	{{item.name}}	{{item.age}}	{{item.address}}


<button ng-click="getFriends(true)">データ取得</button><br />
<button ng-click="getFriends(false)">データ取得（エラー）</button><br />
<strong>レスポンスデータ</strong><br />
    <table class="table table-striped">
  <thead>
    <tr>
      <th>№</th><th>名前</th><th>年齢</th><th>住所</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in friends" >
      <td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.address}}</td>
    </tr>
  </tbody>
</table>

１）アノニマスのファクトリを使ってinterceptorを設定する方法
var demoApp = angular.module('demoApp', []);
demoApp.config(function($httpProvider) {
  $httpProvider.interceptors.push(function ($q) {
    return {
      request: function(config) {
        config.headers.Authorization = 'Basic xxxx';
        console.log('Interceptor:request', config.headers);
        return config;
      },
      requestError: function(rejection) {
        console.log('Interceptor:requestError', rejection);
        return $q.reject(rejection);
      },
      response: function(response) {
        console.log('Interceptor:response', response);
        return response;
      },
      responseError: function(rejection) {
        console.log('Interceptor:responseError', rejection.statusText);
        return $q.reject(rejection);
      }
    }
  })
});

demoApp.controller('intceptCtrl', function ($scope, $http) {
  $scope.getFriends = function (tf) {
    var svrURL = (tf ? "friends.json" :"invalid-url.php");
    var config = {};
    $http.get(svrURL, config)
      .then(function onSuccess(response) {
        console.log('Client:response', response.status);
        $scope.friends = response.data;
      }, function onError(response) {
        console.log('Client:responseError',response.status);
        $scope.friends = [];
      });
  };
});

２）サービスとしてinterceptorを登録する方法
var demoApp = angular.module('demoApp', []);
demoApp.factory('myInterceptor', function($q) {
  return {
    request: function(config) {
      config.headers.Authorization = 'Basic xxxx';
      console.log('Interceptor:request', config.headers);
      return config;
    },
    requestError: function(rejection) {
      console.log('Interceptor:requestError', rejection);
      return $q.reject(rejection);
    },
    response: function(response) {
      console.log('Interceptor:response', response);
      return response;
    },
    responseError: function(rejection) {
      console.log('Interceptor:responseError', rejection.statusText);
      return $q.reject(rejection);
    }
  };
});
demoyApp.config(function($httpProvider) {
  $httpProvider.interceptors.push('myInterceptor');
});