最近在項(xiàng)目中折騰了下angular2,所以出來跟大家分享，希望有幫助，每個公司業(yè)務(wù)不一樣，按實(shí)際情況而定，個人學(xué)習(xí)心得，不作為標(biāo)準(zhǔn)。
創(chuàng)新互聯(lián)IDC提供業(yè)務(wù):服務(wù)器機(jī)柜租用,成都服務(wù)器租用,服務(wù)器機(jī)柜租用,重慶服務(wù)器租用等四川省內(nèi)主機(jī)托管與主機(jī)租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機(jī)房,BGP機(jī)房,電信機(jī)房,移動機(jī)房,聯(lián)通機(jī)房。
1、定義http-interceptor.service.ts服務(wù)，統(tǒng)一處理http請求
重慶分公司
重慶分公司
/**
* name:http服務(wù)
* describe:對http請求做統(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ā)送請求
* @param params
* @returns {Promise<{success: boolean, msg: string}>|Promise}
*/
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請求
* @param url 接口地址
* @param params 參數(shù)
* @returns {Promise|Promise}
*/
public get(url: string, params: any): any {
return this.http.get(url, {search: params})
.toPromise()
.then(this.handleSuccess)
.catch(res => this.handleError(res));
}
/**
* post請求
* @param url 接口地址
* @param params 參數(shù)
* @returns {Promise|Promise}
*/
public post(url: string, params: any) {
return this.http.post(url, params)
.toPromise()
.then(this.handleSuccess)
.catch(res => this.handleError(res));
}
/**
* 處理請求成功
* @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
}
}
}
/**
* 處理請求錯誤
* @param error
* @returns {void|Promise|Promise|any}
*/
private handleError(error) {
console.log(error);
let msg = '請求失敗';
if (error.status == 400) {
console.log('請求參數(shù)正確');
}
if (error.status == 404) {
console.error('請檢查路徑是否正確');
}
if (error.status == 500) {
console.error('請求的 2、在每一個模塊創(chuàng)建一個service，service定義此模塊的所有http數(shù)據(jù)請求，我這里演示登錄模塊：login.service.ts
/**
* name:登錄服務(wù)
* describe:請輸入描述
* 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
},
});
}
/**
* 注冊
* @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ù)定義的方法，這里通過login.component.ts演示
/**
* name:登錄組件
* describe:請輸入描述
* 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ù)
});
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
