15

beforeSend、success、complete などのさまざまなコールバックを持つJquery AJAX callに精通しています。

これは、Jquery を使用した AJAX 呼び出しの例です。

$.ajax({
  url: 'register.php',
  type: 'POST',
  data: {name:name, email:email},
  beforeSend: function() {
       // show loading GIF
  },
  complete: function() {
      // hide loading GIF
  },
  success: function(data) {
      // parse response
  }
});

AngularJS を使用して同じことを達成したいと考えています。

AngularJS AJAX リクエストのbeforeSendのようなコールバックはありますか? これはこれまでの私のコードですが、私のコードでbeforeSendのようなコールバックをどこで使用できるかわかりません(読み込み中の GIF 画像を表示できるようにするため):

$http.post('register.php', {'name': $scope.name, 'email': $scope.email})
.success(function(data, status, headers, config) {
    if (data != '') { 
    }
});
4

2 に答える 2

11

デフォルトでは、Angular は beforeSend と complete を提供しませんが、インターセプターを使用して実装できます。これが私の実装です：

(function() {
    var app = angular.module("app");

    app.factory("interceptors", [function() {

        return {

            // if beforeSend is defined call it
            'request': function(request) {

                if (request.beforeSend)
                    request.beforeSend();

                return request;
            },


            // if complete is defined call it
            'response': function(response) {

                if (response.config.complete)
                    response.config.complete(response);

                return response;
            }
        };

    }]);

})();

次に、次のようにインターセプターを登録する必要があります。

    (function () {
        var app = angular.module('app', ['ngRoute']);


        app.config(["$routeProvider", "$httpProvider", function ($router, $httpProvider) {    

            // Register interceptors service
            $httpProvider.interceptors.push('interceptors');

            $router.when("/", { templateUrl: "views/index.html" })


            .otherwise({ redirectTo: "/" });        
        }]);
    })();

このコードの後、次のように使用できます。

var promise = $http({
    method: 'POST',
    url: constants.server + '/emails/send',
    data: model,
    beforeSend: function() {
        model.waiting = true;
    },
    complete: function() {
        model.waiting = false;
    }
});
于 2015-11-19T23:11:17.670 に答える
7

使用できますinterceptors。interceptorAngular $http ドキュメントで単語を検索します

ドキュメントにあるように:グローバルなエラー処理、認証、またはあらゆる種類の同期または非同期の要求の前処理または応答の後処理の目的で

ajax 呼び出しが送信される前に読み込み中の gif を表示する良いFiddle の例を次に示します。

編集

Satpal がコメントし$httpProvider.responseInterceptorsたように、Fiddle で使用されるのはdeprecated. $httpProvider.interceptors代わりに使用する必要があります。

于 2014-03-03T07:08:37.157 に答える