奥门巴黎人手机网址【app】

AngularJS通过$http和服务器通讯详解

2019-08-21 09:01·巴黎人手机网投

angular通过封装$http方法,封装了,ajax须求

$http 是 AngularJS 中的三个核心服务,用于读取远程服务器的多寡。在AngularJS的骨子里项目中,通常索要管理四个$http央求,各类$http诉求重临二个promise,大家能够把四个promise放到$q.all()方法接受的三个数组实参中去。

$http

科技世界,有的是时候,笔者很喜欢angular的编码风格,极其是angular支持typescript之后,完整的生命周期,完美的钩函数,都以其余语言商量所无法代表的。

也通过$http封装了$http.get()$http.post()的章程,这里由于图省事,那二种办法不比直接采纳通用的艺术

1.甩卖多少个$http央浼

AngularJS提供了$http服务来同服务端举行通讯,$http服务队浏览器的XMLHttpRequest对象开展了打包,让大家能够以ajax的秘诀来从服务器央浼数据。

那边作者来讲说自家要好的互连网伏乞封装,某种意义上的话,angular本人的网络供给封装的很好的,大家从未须求再来画蛇添足,不过,只怕是自身有那么一丢丢的代码洁癖吧,喜欢本身的风格样式,所以就有了那点剩下的东西。

这里先写三个案例,首先先写二个目标

angular.module('app',[])
.controller('AppCtrl', function AppCtrl(myService){
var app = this;
myService.getAll().then(function(info){
app.myInfo = info;
})
})
.service('myService', function MyService($http, $q){
var myService = this;
user = 'https://api...',
repos = '',
events = '';
myService.getData = function getData(){
return $http.get(user).then(function(userData){
return {
name:userData.data.name,
url:userData.data.url,
repoCount: userData.data.count
}
})
};
myService.getUserRepos = function getUserRepos(){
return $http.get(repos).then(function(response){
return _.map(response.data, function(item){
return {
name: item.name,
description:item.description,
starts: item.startCount
}
})
})
}
myService.getUserEvents = function getUserEvents(){
...
}
myService.getAll = function(){
var userPromise = myService.getData(),
userEventsPromise = myService.getUserRepos(),
userReposPromise = myService.getUserRepos();
return $q.all([userPromise, userEventsPromise, userReposPromise]).then(function(){
....
})
}
})

在AngularJS中与远程HTTP服务器交互时会用三个万分主要的劳务-$http。

Angular的网络诉求

var req = { 
 method: 'POST',//请求的方式 
 url: ip,//请求的地址 
 headers: { 
  'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
  'Accept': '*/*' 
 },//请求的头,如果默认可以不写 
 timeout:5000,//超时时间,还没有测试 
 data: str //message 必须是a=b&c=d的格式 
}; 

2.$http诉求缓存

      1、$http是angular中的三个主题服务,利用浏览器的xmlhttprequest或许via JSONP对象与长途HTTP服务器实行交互。

那边是angular自个儿的网络央求。

下一场通过$http方法调用对象,获裁撤息

$http的get方法第1个形参接受八个目的,该指标的cache字段能够承受三个bool类型达成缓存,即{cache:true},也可以接受三个服务。

      2、$http的施用形式和jquery提供的$.ajax操作比较一致,均扶助八种method的必要,get、post、put、delete等。

  1. url代表网络央求地址,
  2. param网络央浼参数
  3. 网络乞求配置,举例:央求头等
$http(req).success(function (data, status, headers, config) { 
 //成功后的数据处理 

}).error(function (data, status, headers, config) { 
 //失败后的提示 
 console.log("error", data, status, headers, JSON.stringify(config)); 
}); 

因而factory形式创造二个服务,并把该服务注入到controller中去。

      3、$http的各个法子的伸手更趋近于rest风格。

 this.http.post(url, param, config).subscribe(
   (res) => {
    //...请求成功
   }, (err) => {
    //...请求失败
   }, () => {
    //...请求完成
   }
  );

angular 的ajax使用的是链式调用的方法,相比较便捷,轻便易懂

angular.module('app',[])
.factory("myCache", function($cacheFactory){
return $cacheFactory("me");
})
.controller("AppCtrl", function($http, myCache){
var app = this;
app.load = function(){
$http.get("apiurl",{cache:myCache})
.success(function(data){
app.data = data;
})
}
app.clearCache = function(){
myCache.remove("apiurl");
}
})

      4、在controller中可透过与$scope一样的主意得到$http对象,e.g. function controller($scope,$http){}

比比较多时候自个儿认为,每贰遍呼吁都要写上subscribe里面包车型地铁那一个参数,很麻烦,或许说看起来感觉不欣赏,所以,小编一般给本人包装三个新的劳动service。相同的时候给每多个须要做网络乞请的零件component完成三个新的接口interface,那其间有众多都是源自java语言的陈设观念。

$http的安插项

笔者计算:

下边进行$http服务的行使验证,调用如下:

三个互联网接口

method:乞请格局,有GET/DELETE/HEAD/JSONP/POST/PUT

● 实际上,达成缓存机制的是$cacheFactory
● 通过{cache:myCache}把缓存机制放在脚下央浼中
● $cacheFactory把乞求api作为key,所以清楚缓存的时候,也是凭借那一个key来解除缓存

$http(config).success(function(data,status,headers,config){}).error(function(data,status,headers,config){});

此地创办三个网络接口,来成功网络须要的回调。

url:相对的照旧相对的乞请目的

如上所述是小编给大家共享的AngularJS中$http缓存以及管理三个$http哀告的主意,希望对我们全部帮衬。

$http服务是叁个接受三个参数的函数,参数的等级次序是目的,用来布局生成的http的央浼,该函数再次来到一个promise对象

export interface OnHttpImp {

 onResult(result: HttpResult, code?: number): void;

 onError?(err:any): void;

 onComplete?(): void;
}

export class HttpResult {
 code?: number;
 data?: any;
 msg?: string;
}