基于angular2 的 http服務(wù)封裝的實(shí)例代碼
最近在項(xiàng)目中折騰了下angular2,所以出來(lái)跟大家分享,希望有幫助,每個(gè)公司業(yè)務(wù)不一樣,按實(shí)際情況而定,個(gè)人學(xué)習(xí)心得,不作為標(biāo)準(zhǔn)。
1、定義http-interceptor.service.ts服務(wù),統(tǒng)一處理http請(qǐng)求
/**
* name:http服務(wù)
* describe:對(duì)http請(qǐng)求做統(tǒng)一處理
* author:Angular那些事
* date:2017/6/3
* time:11:29
*/
import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class HttpInterceptorService {
constructor(private http: Http) {
}
/**
* 統(tǒng)一發(fā)送請(qǐng)求
* @param params
* @returns {Promise<{success: boolean, msg: string}>|Promise<R>}
*/
public request(params: any): any {
if (params['method'] == 'post' || params['method'] == 'POST') {
return this.post(params['url'], params['data']);
}
else {
return this.get(params['url'], params['data']);
}
}
/**
* get請(qǐng)求
* @param url 接口地址
* @param params 參數(shù)
* @returns {Promise<R>|Promise<U>}
*/
public get(url: string, params: any): any {
return this.http.get(url, {search: params})
.toPromise()
.then(this.handleSuccess)
.catch(res => this.handleError(res));
}
/**
* post請(qǐng)求
* @param url 接口地址
* @param params 參數(shù)
* @returns {Promise<R>|Promise<U>}
*/
public post(url: string, params: any) {
return this.http.post(url, params)
.toPromise()
.then(this.handleSuccess)
.catch(res => this.handleError(res));
}
/**
* 處理請(qǐng)求成功
* @param res
* @returns {{data: (string|null|((node:any)=>any)
*/
private handleSuccess(res: Response) {
let body = res["_body"];
if (body) {
return {
data: res.json().content || {},
page: res.json().page || {},
statusText: res.statusText,
status: res.status,
success: true
}
}
else {
return {
statusText: res.statusText,
status: res.status,
success: true
}
}
}
/**
* 處理請(qǐng)求錯(cuò)誤
* @param error
* @returns {void|Promise<string>|Promise<T>|any}
*/
private handleError(error) {
console.log(error);
let msg = '請(qǐng)求失敗';
if (error.status == 400) {
console.log('請(qǐng)求參數(shù)正確');
}
if (error.status == 404) {
console.error('請(qǐng)檢查路徑是否正確');
}
if (error.status == 500) {
console.error('請(qǐng)求的服務(wù)器錯(cuò)誤');
}
console.log(error);
return {success: false, msg: msg};
}
}
2、在每一個(gè)模塊創(chuàng)建一個(gè)service,service定義此模塊的所有http數(shù)據(jù)請(qǐng)求,我這里演示登錄模塊:login.service.ts
/**
* name:登錄服務(wù)
* describe:請(qǐng)輸入描述
* author:Angular那些事
* date:2017/6/1
* time:00:13
*/
import {Injectable} from '@angular/core';
import {HttpInterceptorService} from 'app/commons/service/http-interceptor.service'
@Injectable()
export class LoginService {
constructor(private httpInterceptorService: HttpInterceptorService) {
}
/**
* 登陸功能
* @param params
* @returns {Promise<{}>}
*/
login(userName: string, passWord: string) {
return this.httpInterceptorService.request({
method: 'POST',
url: 'http://119.232.19.182:8090/login',
data: {
loginName: userName,
password: passWord
},
});
}
/**
* 注冊(cè)
* @param user
* @returns {any}
*/
reguster(user: any) {
return this.httpInterceptorService.request({
method: 'POST',
url: 'http://119.232.19.182:8090/reguster',
data: {
user: user
},
});
}
}
3、在component注入servicelogin.service.ts。調(diào)用seriveLogin.service.ts服務(wù)定義的方法,這里通過(guò)login.component.ts演示
/**
* name:登錄組件
* describe:請(qǐng)輸入描述
* author:Angular那些事
* date:2017/6/1
* time:00:30
*/
import {Component} from '@angular/core'
import {LoginService} from './login.service'
@Component({
selector: 'login',
templateUrl: './login.component.html',
providers: [LoginService],
})
export class LoginComponent {
private userName: string;
private passWord: string;
constructor(private loginService: LoginService) {
}
/**
* 登錄
*/
toLogin() {
this.loginService.login(this.userName, this.passWord).then(result => {
console.log(result);//打印返回的數(shù)據(jù)
});
}
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解angular臟檢查原理及偽代碼實(shí)現(xiàn)
這篇文章主要介紹了詳解angular臟檢查原理及偽代碼實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
AngularJS實(shí)現(xiàn)的簡(jiǎn)單拖拽功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的簡(jiǎn)單拖拽功能,涉及AngularJS事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01
Angular.js中ng-include用法及多標(biāo)簽頁(yè)面的實(shí)現(xiàn)方式詳解
這篇文章主要給大家介紹了在Angular.js中ng-include用法及多標(biāo)簽頁(yè)面的實(shí)現(xiàn)方式的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
在 Angular2 中實(shí)現(xiàn)自定義校驗(yàn)指令(確認(rèn)密碼)的方法
這篇文章給大家探索 Angular 2 內(nèi)建的自定義驗(yàn)證,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-01-01
angular強(qiáng)制更新ui視圖的實(shí)現(xiàn)方法
這篇文章主要介紹了angular強(qiáng)制更新ui視圖的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03
angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法
本篇文章主要介紹了angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法,分別介紹了$http.post和$http.get請(qǐng)求的方法,有興趣的可以了解一下2017-05-05

