Comment angulairejs détermine-t-il si le rendu est terminé ? Que se passe-t-il avec le service $httpprovider ?-js tutoriel-php.cn

Cet article est une note sur angularjs Parfois, j'ai déjà trouvé une solution à certains problèmes, mais maintenant je l'ai oubliée et je dois rechercher à nouveau les informations. Par conséquent, je vais écrire ceci. maintenant, à titre de note. Non, ce sont toutes des méthodes correctes à utiliser. Jetons-y un coup d'œil maintenant

méthodes fromJson et toJson

angular.fromJson()La méthode consiste à convertir json en un objet ou un tableau d'objets. Le code source est le suivant :

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

Copier après la connexion

angular.toJson()La méthode consiste à convertir un objet. ou un tableau en json. Le code source est le suivant :

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

Copier après la connexion

promise

La promesse d'Angular est fournie et construite par $q, qui fournit une méthode d'exécution asynchrone en enregistrant un projet de promesse. .

La gestion des rappels asynchrones dans JS est toujours très lourde et compliquée :

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

Copier après la connexion

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

Copier après la connexion

Promesse aide les développeurs à échapper à l'abîme des fonctions de rappel asynchrones profondément imbriquées. Angularjs fournit et crée des promesses via le service $q. Le cas le plus complet :

   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);
       });

Copier après la connexion

Appel de promesse : $q.when(fun()).then(successCallback, errorCallback, notifyCallback); Abréviation : fun().then(successCallback, errorCallback, notifyCallback);

Utilisation de l'encapsulation du service angulaire js :

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
        });
    }]);

Copier après la connexion

$http , $httpProvider service

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

$ http est un Requête XMLHttpRequest encapsulée par angulaire. La pensée d'Angular est orientée vers des concepts reposants. Les méthodes sont : GET, POST, PUT, DELTE, PATCH, HEAD, etc.

en-tête de requête par défaut d'angular :
Accepter : application/json, text/plain accepter json et text
Content-Type : application/json
Si vous souhaitez modifier les paramètres par défaut, vous pouvez le modifier dans app.config

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";
});

Copier après la connexion

Tant qu'il s'agit d'en-têtes par défaut, ils seront inclus à chaque fois qu'une demande est envoyée. Ainsi, si nous utilisons des en-têtes personnalisés pour chaque requête, nous pouvons également les écrire dans default.headers. $httpProvider.defaults.headers.common["myHeader"] = "myheaderValue";//common 表示不管任何的 method POST,GET,PUT等

Ces en-têtes par défaut peuvent être remplacés via des paramètres à chaque fois que nous faisons une demande. De plus, le service $http fournit également un pointeur vers les valeurs par défaut (Remarque : $httpProvider.defaults === $http.defaults. )

$httpProvider.defaults.transformRequest & transformResponse

Ce sont les 2 interfaces qui nous sont fournies par angulaire, avant que la requête ne soit envoyée et que la réponse ne soit pas encore avant en déclenchant le rappel, effectuez un traitement sur les données de publication et les données de réponse. Elles sont de type tableau. Nous pouvons y insérer certaines fonctions (angular par défaut est une méthode pour la demande et la réponse. Lors de la publication, si les données sont un objet, elle sera jsonisée. Lors de la réponse, si les données sont de type json, elles seront analysées dans un objet). À chaque requête, nous pouvons toujours écraser l’intégralité du tableau. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois Manuel de développement AngularJS pour en savoir)

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
    });
});

Copier après la connexion

$httpProvider.defaults.cache. Angular est par défaut cahce = false, et vous pouvez également définir chaque requête via les valeurs par défaut. Nous pouvons également remplacer les paramètres pour chaque demande. Lorsque deux requêtes sans cache sont envoyées en même temps, Angular peut également les gérer et ne les envoyer qu'une seule fois.

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 //强制不使用缓存，即使已存在
    });
});

Copier après la connexion

$httpProvider.interceptors
(intercepteurs signifie interception en chinois). En plus de la transformation introduite précédemment, qui peut effectuer certains traitements sur les données, angulaire fournit également quatre autres moments, à savoir onRequest, onRequestFail, onResponse et onResponseFail. Faisons un traitement externe. Par exemple, lorsque notre serveur renvoie 500, nous souhaitons peut-être faire une alerte générale, ou ajuster automatiquement la configuration avant d'essayer la requête si la requête échoue, etc.

//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对象                  
            }
        };
    }]);

Copier après la connexion

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

`Déterminez si la vue est rendue`

// 指令
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
    });
});

Copier après la connexion

D'accord, cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Apprendre du manuel d'utilisation d'AngularJS ). Si vous avez des questions, vous pouvez laisser un message ci-dessous.


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!