ホームページ > 記事 > ウェブフロントエンド > angularjs はレンダリングが完了したかどうかをどのように判断しますか? $httpprovider サービスでは何が起こるのでしょうか?

angularjs はレンダリングが完了したかどうかをどのように判断しますか? $httpprovider サービスでは何が起こるのでしょうか?

寻∝梦オリジナル: 2018-09-07 16:44:002104ブラウズ

この記事は angularjs についてのメモです。以前にいくつかの問題の解決策を見つけたことがありますが、今では忘れてしまったので、今これを書くと、それは次のとおりです。今すぐ使用する正しいメソッドをいくつか見てみましょう

fromJsonメソッドとtoJsonメソッド

angular.fromJson()メソッドは、jsonをオブジェクトまたはオブジェクト配列に変換することです。ソースコードは次のとおりです。以下:

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

angular .toJson() メソッドはオブジェクトまたは配列を json に変換します。ソースコードは次のとおりです:

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

promise

Angular の promise は $q によって提供され、構築されます。 Promise プロジェクトを登録することで非同期実行するためのメソッドを提供します。

JS での非同期コールバックの処理は常に非常に面倒で複雑です。

// 案例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 は、開発者が深くネストされた非同期コールバック関数の深淵から脱出するのに役立ちます。 Angularjs は、$q サービスを通じて Promise を提供および構築します。最も完全なケース:

   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 呼び出し: $q.when(fun()).then(successCallback, errorCallback, NoticeCallback); 省略形は次のとおりです: fun().then ( successCallback、errorCallback、notifyCallback); $q.when(fun()).then(successCallback, errorCallback, notifyCallback); 简写为：fun().then(successCallback, errorCallback, notifyCallback);

angularjs service封装使用：

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服务

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

$http 是angular 封装好的 XMLHttpRequest 请求，angular 的思想偏向restful概念, 方法有：GET,POST,PUT,DELTE,PATCH,HEAD等

angular 默认的请求头:
Accept: application/json, text/plain 接受json和text
Content-Type : application/json
如果要修改默认设置的话可以在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";
});

只要是default的headers，在每次发送请求的时候都会带上。所以如果我们每个请求都有用到一些自定义的header，我们也可以写入在default.headers中。$httpProvider.defaults.headers.common["myHeader"] = "myheaderValue";//common 表示不管任何的 method POST,GET,PUT等

这些default的header是可以在每一次我们发请求的时候通过参数来覆盖掉.另外$http service 也提供了一个defaults的指针 (注: $httpProvider.defaults === $http.defaults )

$httpProvider.defaults.transformRequest & transformResponse

这是angular提供给我们的2个接口，在请求发送前和响应还没有触发callback前对post data 和 response data做一些处理它们是个数组类型，我们可以push一些函数进去 (angular默认对request和response都放入了一个方法，post的时候如果data是对象将json化，响应时如果data是json类型，将解析成对象)。在每一次的请求，我们依然可以覆盖整个数组。（想看更多就到PHP中文网AngularJS开发手册中学习）

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。angular 默认cahce = false, 一样可以通过defaults去设置每个请求。我们也可以在每次请求覆盖设置。当同时发送2个没有缓存的请求时，angular也能处理，只发送一次。

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 中文是拦截的意思)。除了之前介绍过的 transform 可以对数据做一些处理, angular也提供了另外4个时刻，分别是 onRequest, onRequestFail, onResponse, onResponseFail。让我们做一些而外处理. 比如当我们server返回500的时候，可能我们想做一个通用的alert，或是request fail 的话自动调整一下config在尝试请求等等.

//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.responseangularjs サービスのカプセル化は次を使用します: <hr><pre class="brush:php;toolbar:false">// 指令 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 }); });</pre><h2>$http, $httpProvider サービス</h2><blockquote>https://docs.angularjs.org/ap...$http<p>https : //www.cnblogs.com/keatk...</p> </blockquote><a href="http://php.cn/course/47.html" target="_blank">$http は、Angular によってカプセル化された XMLHttpRequest リクエストです。メソッドは GET、POST、PUT、DELTE、PATCH、HEAD に偏っています。、など。 </a><br>angular デフォルトのリクエストヘッダー:<p class="comments-box-content"></p>Accept: application/json, text/plain json と text を受け入れます🎜Content-Type: application/json🎜 デフォルト設定を変更したい場合は、アプリ内で変更できます.config🎜rrreee🎜 デフォルトのヘッダーである限り、リクエストが送信されるたびに含まれます。したがって、リクエストごとにカスタムヘッダーを使用する場合は、それらをdefault.headersに記述することもできます。 <code>$httpProvider.defaults.headers.common["myHeader"] = "myheaderValue";//共通とは、POST、GET、PUT などのメソッドに関係なく使用できることを意味します。🎜🎜これらのデフォルトのヘッダーは使用できますリクエストを送信するたびに、パラメータを通じてリクエストをオーバーライドします。さらに、$http サービスはデフォルトへのポインタも提供します (注: $httpProvider.defaults === $http.defaults)🎜🎜🎜$httpProvider.defaults.transformRequest。 &transformResponse🎜 🎜 🎜これらは angular によって提供される 2 つのインターフェイスで、リクエストが送信される前、および応答がコールバックをトリガーする前に、投稿データと応答データに対して何らかの処理を行います。これらは配列型であり、いくつかの関数をプッシュできます。それら（angularのデフォルトではリクエストとレスポンスにメソッドが入れられています。ポスト時にデータがオブジェクトの場合はjsonに変換されます。レスポンス時にデータがjson型の場合はオブジェクトに解析されます）。リクエストのたびに、配列全体を上書きすることができます。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト🎜AngularJS 開発マニュアル🎜 にアクセスして学習してください)🎜rrreee🎜$httpProvider.defaults.cache。 Angular のデフォルトの cahce = false ですが、デフォルトを使用して各リクエストを設定することもできます。リクエストごとに設定をオーバーライドすることもできます。 2 つのキャッシュされていないリクエストが同時に送信された場合、Angular はそれを処理して 1 回だけ送信することもできます。 🎜rrreee🎜🎜$httpProvider.interceptors🎜 🎜 (インターセプターは中国語で傍受を意味します)。データに対して何らかの処理を実行できる前に紹介した変換に加えて、angular は他の 4 つの瞬間、つまり onRequest、onRequestFail、onResponse、および onResponseFail も提供します。たとえば、サーバーが 500 を返したときに一般的なアラートを出したり、リクエストが失敗した場合にリクエストを試行する前に設定を自動的に調整したりするなど、外部処理を実行してみましょう。実行順序はこんな感じです interceptors.request ->transformRequest ->transformResponse ->interceptors.response🎜🎜🎜ビューがレンダリングされるかどうかを判断します🎜rrreee🎜詳細については、PHP 中国語 Web サイト 🎜AngularJS ユーザーマニュアル🎜 をご覧ください)。ご質問がある場合は、以下にメッセージを残してください。 🎜🎜🎜🎜

以上がangularjs はレンダリングが完了したかどうかをどのように判断しますか? $httpprovider サービスでは何が起こるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Lauiuiデータテーブルの自動マージを実現する方法（コード）次の記事：Lauiuiデータテーブルの自動マージを実現する方法（コード）

続きを見る