前言
隨便一個前端工程都離不開請求數據，剛開始我做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”即可，如果需要的話，還需要對參數做處理）
命令行完成后的目錄接口（先貼出來以后方便對比）
1.在src 目錄下創建一個目錄來存放http請求相關的文件，如下圖（PS:我這里是創建的一個名為providers的文件夾）
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文件。稍微修改一下，如下圖
進行到這一步的時候，配置這塊兒就基本完成了。然后我們得把項目跑起來。測試一請求是否能成功。驗證接口這塊兒。我找了中國氣象局的免費API做測試.地址如下:
4.使用我們的http配置
4.1 在homePage頁面新建一個按鈕。綁定一個事件（PS:homePage路徑:src/pages/home/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);
});
}
}
到這里的時候基本完成了。可以進入你的ionic項目目錄,執行ionic serve命令。啟動此項目。看效果。最終效果如圖
這樣的話就是請求成功的！
這個是最基本的配置。精簡了很多功能。這里就不贅述了。我貼出我完成的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.統一管理請求路徑。如下圖
2.moduleNameService.ts
3.使用方法（PS:紅色框外的代碼）
好了。到這里我http請求所遇到的問題都有描述了。由于我也是才入坑ionic。代碼寫的不是很規范。各位看官擔待
