ionic3 http请求

liang1234_ 2019-03-24

展开全文

前言

随便一个前端工程都离不开请求数据，刚开始我做demo的时候拿着就开始写静态页面。后来发现这个东西，我连请求接口都不会，然后查各种资料。最后成功请求到数据。这里面也遇到过很多的坑。好在在学习的过程中遇坑填坑。没把自己埋里面。

环境介绍

ionic版本 3.10.1
项目采用命令行创建(PS:类型tabs)

本文功能点

基本的http请求配置及使用（本文的重点介绍。下面的功能点都可以根据本文的demo来改进。）
请求超时问题
jwt请求headers token设置
请求时候loading设置使用ionic LoadingController组件
请求错误提示。使用ionic AlertController 组件
请求类型JSON、formData设置（PS：本文所使用的类型是JSON。如果想使用formData headers 设置更改为“ x-www-form-urlencoded”即可，如果需要的话，还需要对参数做处理）

命令行完成后的目录接口（先贴出来以后方便对比）

一个干净的tabs目录结构

1.在src 目录下创建一个目录来存放http请求相关的文件，如下图（PS:我这里是创建的一个名为providers的文件夹）

image.png

2.在providers目录下新建一个名为HttpService.ts的文件，代码如下:(PS:复制可用)

import {Injectable} from '@angular/core';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/toPromise';

 @Injectable()
 export class HttpService {
   loader: any;
    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) {
 //x-www-form-urlencoded
 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.resultCode != '0000') {
   let params = {
        title: '错误！',
        subTitle: result.message,
   }
 }
 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 '，请检查路径是否正确');
 }
 let params = {
      title: '错误！',
      subTitle: msg,
 }
 return {success: false, msg: msg};
 }

 /**
* @param obj　参数对象
* @return {string}　参数字符串
* @example
*  声明: var obj= {'name':'zhangsan',sex:1};
*  调用: toQueryString(obj);
*  返回: '?name=zhangsan&age=1'
*/
 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));
   }
}
let str = obj?'?'   ret.join('&'):''
return str;

}

 private toQueryPair(key, value) {
 if (typeof value == 'undefined') {
   return key;
 }
 return key   '='   encodeURIComponent(value === null ? '' : String(value));
 }    
}

3.需要更改src目录下的app.module.ts文件。稍微修改一下，如下图

app.module.tsg

进行到这一步的时候，配置这块儿就基本完成了。然后我们得把项目跑起来。测试一请求是否能成功。验证接口这块儿。我找了中国气象局的免费API做测试.地址如下:

http://www.weather.com.cn/data/sk/101010100.html

4.使用我们的http配置

4.1 在homePage页面新建一个按钮。绑定一个事件（PS:homePage路径:src/pages/home/home.html）;修改效果入下

home.html

上图是有一点问题的。我截图的时候没有注意。homeService.ts此文件。大家不用在意。不会影响这个例子的运行的
4.2 在src/pages/home/home.ts文件中加入事件的方法。home.ts文件代码如下:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpService } from '../../providers/HttpService';

 @Component({
  selector: 'page-home',
  templateUrl: 'home.html'
 })
   export class HomePage {

 constructor(public navCtrl: NavController,private httpService:HttpService) {

}
getTest(){
this.httpService.get('http://www.weather.com.cn/data/sk/101010100.html',null).then(res=>{
    console.log(res);
});
}

  }

image.png

到这里的时候基本完成了。可以进入你的ionic项目目录,执行ionic serve命令。启动此项目。看效果。最终效果如图

image.png

这样的话就是请求成功的！
这个是最基本的配置。精简了很多功能。这里就不赘述了。我贴出我完成的httpservice.ts文件。给大家注释下就可以。
功能点如下：

请求超时问题
jwt请求headers token设置
请求时候loading设置使用ionic LoadingController组件
请求错误提示。使用ionic AlertController 组件
请求类型JSON、formData设置（PS：本文所使用的类型是JSON。如果想使用formData headers 设置更改为“ x-www-form-urlencoded”即可，如果需要的话，还需要对参数做处理）
自己可参照我下图根据代码，根据本文所创建的基础demo做相应的更改以达到所期待的效果

image.png