ionic2/3实战-集成angular2 http

创建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

所以我们传的参数类型不同,后台也要做相应的接受处理