創建http

• 此篇博文已舊,新版看這里

• 第一步在src根目錄新建一個providers文件夾,在這個文件夾新建一個HttpService.ts文件
  HttpService.ts文件代碼如下
  import {Injectable} from '@angular/core';
  import {Http, Response, Headers, RequestOptions} from '@angular/http';
  import 'rxjs/add/operator/toPromise';

   @Injectable()
   export class HttpService {
  
     constructor(private http: Http) {
     }
  
     public get(url: string, paramObj: any) {
       return this.http.get(url + this.toQueryString(paramObj))
         .toPromise()
         .then(res => this.handleSuccess(res.json()))
         .catch(error => this.handleError(error));
     }
  
     public post(url: string, paramObj: any) {
       let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
       return this.http.post(url, this.toBodyString(paramObj), new RequestOptions({headers: headers}))
         .toPromise()
         .then(res => this.handleSuccess(res.json()))
         .catch(error => this.handleError(error));
     }
  
     public postBody(url: string, paramObj: any) {
       let headers = new Headers({'Content-Type': 'application/json'});
       return this.http.post(url, paramObj, new RequestOptions({headers: headers}))
         .toPromise()
         .then(res => this.handleSuccess(res.json()))
         .catch(error => this.handleError(error));
     }
  
     private handleSuccess(result) {
       if (result && !result.success) {//由于和后臺約定好,所有請求均返回一個包含success,msg,data三個屬性的對象,所以這里可以這樣處理
         alert(result.msg);//這里使用ToastController
       }
       return result;
     }
  
   private handleError(error: Response | any) {
       let msg = '請求失敗';
       if (error.status == 0) {
         msg = '請求地址錯誤';
       }
       if (error.status == 400) {
         msg = '請求無效';
         console.log('請檢查參數類型是否匹配');
       }
       if (error.status == 404) {
         msg = '請求資源不存在';
         console.error(msg+'，請檢查路徑是否正確');
       }
       console.log(error);
       alert(msg);//這里使用ToastController
       return {success: false, msg: msg};
     }
  
     /**
      * @param obj　參數對象
      * @return {string}　參數字符串
      * @example
      *  聲明: var obj= {'name':'小軍',age:23};
      *  調用: toQueryString(obj);
      *  返回: "?name=%E5%B0%8F%E5%86%9B&age=23"
      */
     private toQueryString(obj) {
       let ret = [];
       for (let key in obj) {
         key = encodeURIComponent(key);
         let values = obj[key];
         if (values && values.constructor == Array) {//數組
           let queryValues = [];
           for (let i = 0, len = values.length, value; i < len; i++) {
             value = values[i];
             queryValues.push(this.toQueryPair(key, value));
           }
           ret = ret.concat(queryValues);
         } else { //字符串
           ret.push(this.toQueryPair(key, values));
         }
      }
       return '?' + ret.join('&');
     }
  
     /**
      *
      * @param obj
      * @return {string}
      *  聲明: var obj= {'name':'小軍',age:23};
      *  調用: toQueryString(obj);
      *  返回: "name=%E5%B0%8F%E5%86%9B&age=23"
      */
     private toBodyString(obj) {
       let ret = [];
       for (let key in obj) {
         key = encodeURIComponent(key);
         let values = obj[key];
         if (values && values.constructor == Array) {//數組
           let queryValues = [];
           for (let i = 0, len = values.length, value; i < len; i++) {
             value = values[i];
             queryValues.push(this.toQueryPair(key, value));
           }
           ret = ret.concat(queryValues);
         } else { //字符串
           ret.push(this.toQueryPair(key, values));
         }
       }
       return ret.join('&');
     }
  
     private toQueryPair(key, value) {
       if (typeof value == 'undefined') {
         return key;
       }
       return key + '=' + encodeURIComponent(value === null ? '' : String(value));
     }    
   }
  

• 第二步把HttpService.ts加入到app.module.ts,如下圖
  

  把`HttpService.ts`加入到`app.module.ts`

使用http

• 第一步,如下圖在providers文件夾下新建一個Constants.ts文件,這個文件用來存放一些配置信息,如后臺服務地址,用戶默認頭像等一些配置信息等
  

  ch

• 第二步,我們新建了一個HomeService.ts,用于把Home這個模塊的所有請求再封裝一下,實際開發就是一人負責一個模塊
  

  `HomeService.ts`

• 最后我們在home.ts文件中使用HomeService
  
  最終調用http

最后

• 為了方便測試,我在本地新建一個json文件,如下圖1
• 把APP_SERVE_URL地址改為本地,如下圖2
• 測試效果如下圖3,說明我們的http服務可以跑通了

圖 1

圖 2

圖 3

總結與后臺SpringMvc交互

我的HttpService.ts定義了三個方法:get,post,postBody,其中get很簡單就是通過url傳遞參數,post和postBody這兩個方法的Headers不一樣.這主要是和后臺接受的參數有關了.
我后臺使用SpringMvc,如下圖定義了三個接口,我們分別命名為方法1,2,3

Paste_Image.png

結論

get請求
會進入方法1和方法2,不進入方法3.使用tomcat低于版本8.0,方法1和方法2參數如果包含中文則會亂碼.

post請求
當Content-Type為'application/x-www-form-urlencoded',參數類型如"name=%E5%B0%8F%E5%86%9B&age=23",會進入方法1和方法2,不會進入方法3
當Content-Type為'application/json',參數類型如{'name':'小軍',age:23} ,參數是json,會正常進入方法3,進入方法1和方法二參數都為null

所以我們傳的參數類型不同,后臺也要做相應的接受處理