Angular2 Ajax

import { UiToolComponent } from 'app/ui-tool/ui-tool.component';

import { Http, Response, RequestOptions, Headers, Request, RequestMethod } from '@angular/http';

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Rx';

import 'rxjs/add/operator/map';

@Injectable()

export class HttpServiceService {

// 定義 http 協定

constructor(private http: Http, private _uiComponent: UiToolComponent) { };

// 定義以 Post 的方法發出請求 (網址, 傳送參數)

postRequest(url, data) {

// 定義常數 headers 並且新增自定義 header

const headers = new Headers();

headers.append('Content-Type', 'application/json');

headers.append('Authorization', 'teset ' + localStorage.getItem('auth'));

// 定義常數 requestoptions 並且設定請求參數

const requestoptions = new RequestOptions({

method: RequestMethod.Post,

url: url,

headers: headers,

body: JSON.stringify(data)

});

// 實際發出請求 並且判斷特定請求代碼

return this.http

.request(new Request(requestoptions))

.map((res: Response) => {

// 請求成功時 回傳 json

if (res) {

if (res.status === 201) {

return res.json();

} else if (res.status === 200) {

return res.json();

}

}

// 請求失敗時

}).catch((error: any) => {

if (error.status === 500) {

this._uiComponent.errorDialog('未預期的伺服器錯誤');

} else if (error.status === 401) {

this._uiComponent.errorDialog('憑證授權已過期');

} else {

return Observable.throw(error.json());

}

});

}

// 定義以 Get 的方法發出請求 (網址)

getRequest(url) {

// 定義常數 headers 並且新增自定義 header

const headers = new Headers();

headers.append('Content-Type', 'application/json');

headers.append('Authorization', 'Bearer ' + localStorage.getItem('auth'));

// 定義常數 requestoptions 並且設定請求參數

const requestoptions = new RequestOptions({

method: RequestMethod.Get,

url: url,

headers: headers

});

// 實際發出請求 並且判斷特定請求代碼

return this.http

.request(new Request(requestoptions))

.map((res: Response) => {

// 請求成功時 回傳 json

if (res) {

if (res.status === 201) {

return res.json();

} else if (res.status === 200) {

return res.json();

}

}

// 請求失敗時

}).catch((error: any) => {

if (error.status === 500) {

return Observable.throw(new Error(error.status));

} else if (error.status === 401) {

return Observable.throw(new Error(error.status));

}

});

}

}

// 發出 Post 請求

this.httpService.postRequest('https://jsonplaceholder.typicode.com/posts', {}).subscribe(

(data) => console.log(data)

);

// 發出 Get 請求

const testUrl = 'https://jsonplaceholder.typicode.com/posts';

this.httpService

.getRequest(testUrl).subscribe(

(res) => {

console.log(res);

},

err => {

console.log(err.toString());

}

);