Anglejs는 렌더링이 완료되었는지 어떻게 확인합니까? $httpprovider 서비스는 어떻게 되나요?
- 寻∝梦원래의
- 2018-09-07 16:44:002137검색
이 글은 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, informCallback); 약어: fun().then ( SuccessCallback, errorCallback, informCallback); $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 service</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 요청입니다. Angular의 생각은 편안한 개념에 편향되어 있습니다: 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";//common은 POST, GET, PUT 등의 방법에 상관없이 이 기본 헤더를 사용할 수 있음을 의미합니다. 요청을 보낼 때마다 매개변수를 통해 이를 재정의합니다. 또한 $http 서비스는 기본값에 대한 포인터도 제공합니다(참고: $httpProvider.defaults === $http.defaults)🎜🎜🎜$httpProvider.defaults.transformRequest & 변환 응답🎜 🎜 🎜이것은 요청이 전송되기 전과 응답이 콜백을 트리거하기 전에 게시 데이터와 응답 데이터에 대해 일부 처리를 수행하는 두 가지 인터페이스이며 배열 유형이며 일부 기능을 푸시할 수 있습니다. (Angular는 기본적으로 요청 및 응답 메소드를 넣었습니다. 게시할 때 데이터가 객체이면 json화됩니다. 응답 중에 데이터가 json 유형이면 객체로 구문 분석됩니다.) 모든 요청에서 전체 배열을 덮어쓸 수 있습니다. (자세한 내용을 보려면 PHP 중국어 웹사이트🎜AngularJS 개발 매뉴얼🎜을 방문하여 알아보세요.)🎜rrreee🎜$httpProvider.defaults.cache. Angular의 기본값은 cahce = false이며 기본값을 통해 각 요청을 설정할 수도 있습니다. 요청별로 설정을 재정의할 수도 있습니다. 캐시가 없는 두 개의 요청이 동시에 전송되면 Angular도 이를 처리하고 한 번만 보낼 수 있습니다. 🎜rrreee🎜🎜$httpProvider.interceptors🎜 🎜(인터셉터는 중국어로 차단을 의미합니다). 데이터에 대해 일부 처리를 수행할 수 있는 이전에 소개된 변환 외에도 각도는 onRequest, onRequestFail, onResponse 및 onResponseFail이라는 네 가지 다른 순간도 제공합니다. 예를 들어, 서버가 500을 반환하면 일반 경고를 보내거나 요청이 실패할 경우 요청을 시도하기 전에 자동으로 구성을 조정해야 할 수 있습니다. 🎜rrreee🎜<code>실행 변환 순서는 다음과 같습니다.interceptors.request ->TransformRequest ->interceptors.response🎜🎜🎜뷰가 완료되었는지 판단하세요🎜rrreee🎜좋아요, 이 글은 여기 있습니다. 자세한 내용은 PHP 중국어 웹사이트(🎜AngularJS 사용자 매뉴얼🎜)를 참조하세요. 궁금한 점이 있으면 아래에 메시지를 남겨주세요. 🎜🎜🎜🎜
위 내용은 Anglejs는 렌더링이 완료되었는지 어떻게 확인합니까? $httpprovider 서비스는 어떻게 되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!