LoginSignup
5
7

More than 5 years have passed since last update.

angularでhttpリクエストの前後に共通処理をする

Posted at

httpリクエスト全体に対して共通の処理がしたい場合、$httpProvider.interceptorsを使って、リクエストの前後に共通の処理を挿入することができます。

https://docs.angularjs.org/api/ng/service/$http
のInterceptorsにサンプルコードがあり、

request : リクエスト前の処理
requestError : リクエストエラー時の処理
response : レスポンス成功時の処理(個別の$http.success()が呼ばれる前)
responseError : レスポンスエラー時の処理(個別の$http.error()が呼ばれる前)

の4つが定義できます。

例えば、認証エラーの場合は必ずログイン画面に飛ばしたい場合は、以下のように書くことができます。

angular.module('myApp')
  .config(['$provide', '$httpProvider', function($provide, $httpProvider) {
    $provide.factory('myHttpInterceptor', ['$q', '$location', '$rootScope', function($q, $location, $rootScope) {
      return {
       'responseError': function(rejection) {
          if (rejection.status === 401) { 
            $location.path('/login');
          }
          return $q.reject(rejection);
        }
      };
    }]);

    $httpProvider.interceptors.push('myHttpInterceptor');

  }]);

個別の $http.error()ハンドラは、上記の共通処理の後に呼ばれます。

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7