前言
随便一个前端工程都离不开请求数据，刚开始我做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做测试.地址如下:
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
为了更好的管理每个模块的HTTP请求。建议没一个模块简历一个 moduleNameService。这里也不赘述了。直接贴出相应代码
1.统一管理请求路径。如下图
image.png
2.moduleNameService.ts
image.png
3.使用方法（PS:红色框外的代码）
image.png
好了。到这里我http请求所遇到的问题都有描述了。由于我也是才入坑ionic。代码写的不是很规范。各位看官担待
网友评论