Wie bestimmt AngularJS, ob das Rendern abgeschlossen ist? Was passiert mit dem $httpprovider-Dienst?

Dieser Artikel ist eine Anmerkung zu angularjs Manchmal habe ich für einige Probleme eine Lösung gefunden, aber jetzt habe ich sie vergessen und muss die Informationen noch einmal nachschlagen Jetzt als Hinweis. Nein, das sind alles die richtigen Methoden. Schauen wir uns sie jetzt an

fromJson- und toJson-Methoden

angular.fromJson()Die Methode besteht darin, JSON in ein Objekt oder Array von Objekten zu konvertieren. Der Quellcode lautet wie folgt:

    function fromJson(json) {
        return isString(json) ? JSON.parse(json) : json  
    }

angular.toJson()Die Methode besteht darin, ein Objekt oder Array zu konvertieren in json. Der Quellcode lautet wie folgt:

    function toJson(obj, pretty) {
        return "undefined" == typeof obj ? undefined : JSON.stringify(obj, toJsonReplacer, pretty ? "  " : null)  
    }

promise

Das Promise von Angular wird von $q bereitgestellt und erstellt, das eine Methode für die asynchrone Ausführung durch die Registrierung eines Promise-Projekts bereitstellt.

Der Umgang mit asynchronen Rückrufen in JS ist immer sehr mühsam und kompliziert:

// 案例1：在前一个动画执行完成后，紧接着执行下一个动画
$('xx').animate({xxxx}, function(){
    $('xx').animate({xx},function(){
        //do something
    },1000)
},1000)

// 案例2：jquery ajax 异步请求
$.get('url').then(function () {
    $.post('url1').then(function () {
      //do something
    });
});

Promise hilft Entwicklern, dem Abgrund tief verschachtelter asynchroner Rückruffunktionen zu entkommen. Angularjs stellt Versprechen über den $q-Dienst bereit und erstellt sie. Der vollständigste Fall:

   var defer1 = $q.defer();

   function fun() {
       var deferred = $q.defer();
       $timeout(function () {
           deferred.notify("notify");
           if (iWantResolve) {
               deferred.resolve("resolved");
           } else {
               deferred.reject("reject");
           }
       }, 500);
       return deferred.promise;
   }

   $q.when(fun())
       .then(function(success){
           console.log("success");
           console.log(success);
       },function(err){
           console.log("error");
           console.log(err);
       },function(notify){
           console.log("notify");
           console.log(notify);
       })
       .catch(function(reson){
           console.log("catch");
           console.log(reson);
       })
       .finally(function(final){
           console.log('finally');
           console.log(final);
       });

Promise-Aufruf: $q.when(fun()).then(successCallback, errorCallback, notifyCallback); abgekürzt als: fun().then(successCallback, errorCallback, notifyCallback);

AngularJS-Dienstkapselungsverwendung:

angular.module("MyService", [])
.factory('githubService', ["$q", "$http", function($q, $http){
    var getPullRequests = function(){
    var deferred = $q.defer();
    var promise = deferred.promise;
    $http.get("url")
    .success(function(data){
        var result = [];
        for(var i = 0; i < data.length; i++){
            result.push(data[i].user);
            deferred.notify(data[i].user); // 执行状态改变通知
        }
        deferred.resolve(result); // 成功解决(resolve)了其派生的promise。参数value将来会被用作successCallback(success){}函数的参数value。
        })
    .error(function(error){
        deferred.reject(error); // 未成功解决其派生的promise。参数reason被用来说明未成功的原因。此时deferred实例的promise对象将会捕获一个任务未成功执行的错误，promise.catch(errorCallback(reason){...})。
    });
    return promise;
}

return {
    getPullRequests: getPullRequests
};
}]);

angular.module("MyController", [])
    .controller("IndexController", ["$scope", "githubService",                                function($scope, githubService){
        $scope.name = "dreamapple";
        $scope.show = true;
        githubService.getPullRequests().then(function(result){
            $scope.data = result;
        },function(error){
        },function(progress){
           // 执行状态通知 notifyCallback
        });
    }]);

$http, $httpProvider-Dienst

https://docs.angularjs.org/ap...$http
https://www.cnblogs.com/keatk...

$http ist das Angular-Paket für Gute XMLHttpRequest-Anfragen, das Denken von Angular tendiert zu erholsamen Konzepten. Die Methoden sind: GET, POST, PUT, DELTE, PATCH, HEAD usw.

Angulars Standard-Anfrageheader:
Accept : application/json, text/plain akzeptieren JSON und Text
Content-Type: application/json
Wenn Sie die Standardeinstellungen ändern möchten, können Sie sie in app.config ändern

var app = angular.module("app", []);
app.config(function ($httpProvider) {           
    log(angular.toJson($httpProvider.defaults));
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
    $httpProvider.defaults.headers.put["Content-Type"] = "application/x-www-form-urlencoded";
    $httpProvider.defaults.headers.patch["Content-Type"] = "application/x-www-form-urlencoded";
});

Wie Solange es sich um die Standard-Header handelt, werden sie bei jeder gesendeten Anfrage angezeigt. Wenn wir also für jede Anfrage einige benutzerdefinierte Header verwenden, können wir diese auch in default.headers schreiben. $httpProvider.defaults.headers.common["myHeader"] = "myheaderValue";//common 表示不管任何的 method POST,GET,PUT等

Diese Standardheader können bei jeder Anfrage durch Parameter überschrieben werden. Darüber hinaus stellt der $http-Dienst auch einen Zeiger auf Standardwerte bereit (Hinweis: $httpProvider.defaults === $http.defaults )

$httpProvider.defaults.transformRequest & transformResponse

Dies sind die beiden Schnittstellen, die uns Angular zur Verfügung stellt, bevor die Anfrage gesendet wird und die Antwort noch nicht vorliegt Auslösen des Rückrufs, Verarbeitung der Post- und Antwortdaten. Sie sind vom Array-Typ. Wir können einige Funktionen in sie einfügen (Angular-Standardwerte für eine Methode sowohl für die Anfrage als auch für die Antwort). Wenn die Daten beim Posten ein Objekt sind, es wird jsonisiert. Wenn die Daten vom Typ json sind, werden sie in ein Objekt geparst. Bei jeder Anfrage können wir weiterhin das gesamte Array überschreiben. (Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website AngularJS Development Manual , um mehr zu erfahren)

var app = angular.module("app", []);
app.config(function ($httpProvider) {            
    $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
    $httpProvider.defaults.transformRequest.shift(); //把angular default的去掉
    $httpProvider.defaults.transformRequest.push(function (postData) { //这个function不是依赖注入哦
        if (angular.isObject(postData)) { 
            return $.param(postData); //如果postData是对象就把它转成param string 返回, 这里借用了jQuery方法
        }
        return postData;
    });
    $httpProvider.defaults.transformResponse.push(function (responseData) {
        log(angular.toJson(responseData)); //响应的数据可以做一些处理
        return "data";
    });
});
app.controller("ctrl", function ($scope, $http) {
    $http({
        method: "POST",
        url: "handle.ashx",
        data: {
            key: "value"
        },
        transformResponse: [], //每一次请求也可以覆盖default
        transformResponse: $http.defaults.transformResponse.concat([function () { return "abc" }]) //如果default要保留要concat
    }).success(function (responseData) {
        log(responseData === "abc"); //true
    });
});

$httpProvider.defaults.cache. Der Standardwert von Angular ist cahce = false. Sie können jede Anforderung auch über Standardeinstellungen festlegen. Wir können Einstellungen auch auf Anfragebasis überschreiben. Wenn zwei Anfragen ohne Cache gleichzeitig gesendet werden, kann Angular dies auch verarbeiten und sendet sie nur einmal.

var app = angular.module("app", []);
app.config(function ($httpProvider) {
    $httpProvider.defaults.cache = true;          
});
app.controller("ctrl", function ($scope, $http) {
    //并发但是只会发送一个请求
    $http.get("handle.ashx");
    $http.get("handle.ashx");
     
    //我们可以为每次请求要不要使用缓存或者缓存数据
    $http({
        url: "handle.ashx",
        method: "GET",
        cahce: true
    });
    $http({
        url: "handle.ashx", 
        method: "GET",
        cache : false //强制不使用缓存，即使已存在
    });
});

$httpProvider.interceptors
(Interceptors bedeutet auf Chinesisch Abfangen). Zusätzlich zu der zuvor eingeführten Transformation, die einige Datenverarbeitungen durchführen kann, bietet Angular auch vier weitere Momente, nämlich onRequest, onRequestFail, onResponse und onResponseFail. Führen wir eine externe Verarbeitung durch. Wenn unser Server beispielsweise 500 zurückgibt, möchten wir möglicherweise eine allgemeine Warnung ausgeben oder die Konfiguration automatisch anpassen, bevor die Anfrage fehlschlägt usw.

//interceptors是数组,放入的是可以依赖注入的方法哦！
    $httpProvider.interceptors.push(["$q", function ($q) {
        return {
            request: function (config) { //config = {method, postData, url, headers} 等                            
                return config; //返回一个新的config,可以做一些统一的验证或者调整等.
            },
            requestError: function (rejection) {                      
                return $q.reject(rejection); //必须返回一个promise对象                                              
            },
            response: function (response) {                     
                return response; //这里也可以返回 promise, 甚至是把它给 $q.reject掉
            },
            responseError: function (rejection) { //rejection = { config, data, status, statusText, headers }                
                return $q.reject(rejection); //必须返回一个promise对象                  
            }
        };
    }]);

transform 的执行次序是这样的 interceptors.request -> transformRequest -> transformResponse -> interceptors.response

---

Beurteilen Sie, ob die Ansicht gerendert wird

// 指令
app.directive('eventNgRepeatDone', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last) {
                // $timeout(function () {
                    scope.$emit('eventNgRepeatDone');
                    if ($attrs.ngRepeatDone) {
                        $scope.$apply(function () {
                            $scope.$eval($attrs.ngRepeatDone);
                        });
                    }
                //});
            }
        }
    }
});

<!-- 使用 -->
<p ng-repeat = "item in list track by $index" event-ng-repeat-done>{{item.name}}</p>

app.controller('myCtrl', ['$scope', function ($scope) {
    $scope.$on ('eventNgRepeatDone', function () {
        // doSomething
    });
});

Okay, dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website AngularJS-BenutzerhandbuchStudium in der Mittelschule), wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

Das obige ist der detaillierte Inhalt vonWie bestimmt AngularJS, ob das Rendern abgeschlossen ist? Was passiert mit dem $httpprovider-Dienst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!