前言
隨便一個(gè)前端工程都離不開(kāi)請(qǐng)求數(shù)據(jù)，剛開(kāi)始我做demo的時(shí)候拿著就開(kāi)始寫(xiě)靜態(tài)頁(yè)面。后來(lái)發(fā)現(xiàn)這個(gè)東西颜启，我連請(qǐng)求接口都不會(huì)，然后查各種資料浪讳。最后成功請(qǐng)求到數(shù)據(jù)缰盏。這里面也遇到過(guò)很多的坑。好在在學(xué)習(xí)的過(guò)程中遇坑填坑淹遵。沒(méi)把自己埋里面口猜。
環(huán)境介紹
- ionic版本 3.10.1
- 項(xiàng)目采用命令行創(chuàng)建(PS:類(lèi)型tabs)
本文功能點(diǎn)
- 基本的http請(qǐng)求配置及使用（本文的重點(diǎn)介紹。下面的功能點(diǎn)都可以根據(jù)本文的demo來(lái)改進(jìn)透揣。）
- 請(qǐng)求超時(shí)問(wèn)題
- jwt請(qǐng)求headers token設(shè)置
- 請(qǐng)求時(shí)候loading設(shè)置 使用ionic LoadingController組件
- 請(qǐng)求錯(cuò)誤提示济炎。使用ionic AlertController 組件
- 請(qǐng)求類(lèi)型JSON、formData設(shè)置（PS：本文所使用的類(lèi)型是JSON淌实。如果想使用formData headers 設(shè)置更改為“ x-www-form-urlencoded”即可冻辩，如果需要的話(huà)，還需要對(duì)參數(shù)做處理）
命令行完成后的目錄接口（先貼出來(lái)以后方便對(duì)比）
1.在src 目錄下創(chuàng)建一個(gè)目錄來(lái)存放http請(qǐng)求相關(guān)的文件拆祈，如下圖（PS:我這里是創(chuàng)建的一個(gè)名為providers的文件夾）
2.在providers目錄下新建一個(gè)名為HttpService.ts的文件恨闪，代碼如下:(PS:復(fù)制可用)
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) {//請(qǐng)求成功的回調(diào)
if (result && result.resultCode != "0000") {
let params = {
title: "錯(cuò)誤！",
subTitle: result.message,
}
}
return result;
}
private handleError(error: Response | any) {//請(qǐng)求失敗的回調(diào)
let msg = '請(qǐng)求失敗';
if (error.status == 0) {
msg = '請(qǐng)求地址錯(cuò)誤';
}
if (error.status == 400) {
msg = '請(qǐng)求無(wú)效';
console.log('請(qǐng)檢查參數(shù)類(lèi)型是否匹配');
}
if (error.status == 404) {
msg = '請(qǐng)求資源不存在';
console.error(msg+'放坏，請(qǐng)檢查路徑是否正確');
}
let params = {
title: "錯(cuò)誤咙咽！",
subTitle: msg,
}
return {success: false, msg: msg};
}
/**
* @param obj 參數(shù)對(duì)象
* @return {string} 參數(shù)字符串
* @example
* 聲明: var obj= {'name':'zhangsan',sex:1};
* 調(diào)用: 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) {//數(shù)組
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文件。稍微修改一下淤年，如下圖
進(jìn)行到這一步的時(shí)候钧敞，配置這塊兒就基本完成了。然后我們得把項(xiàng)目跑起來(lái)麸粮。測(cè)試一請(qǐng)求是否能成功溉苛。驗(yàn)證接口這塊兒。我找了中國(guó)氣象局的免費(fèi)API做測(cè)試.地址如下:
4.使用我們的http配置
4.1 在homePage頁(yè)面新建一個(gè)按鈕弄诲。綁定一個(gè)事件（PS:homePage路徑:src/pages/home/home.html）;修改效果入下
上圖是有一點(diǎn)問(wèn)題的愚战。我截圖的時(shí)候沒(méi)有注意。homeService.ts此文件齐遵。大家不用在意寂玲。不會(huì)影響這個(gè)例子的運(yùn)行的
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);
});
}
}
到這里的時(shí)候基本完成了梗摇⊥赜矗可以進(jìn)入你的ionic項(xiàng)目目錄,執(zhí)行ionic serve命令。啟動(dòng)此項(xiàng)目伶授《闲颍看效果流纹。最終效果如圖
這樣的話(huà)就是請(qǐng)求成功的！
這個(gè)是最基本的配置违诗。精簡(jiǎn)了很多功能捧颅。這里就不贅述了。我貼出我完成的httpservice.ts文件较雕。給大家注釋下就可以。
功能點(diǎn)如下：
- 請(qǐng)求超時(shí)問(wèn)題
- jwt請(qǐng)求headers token設(shè)置
- 請(qǐng)求時(shí)候loading設(shè)置 使用ionic LoadingController組件
- 請(qǐng)求錯(cuò)誤提示挚币。使用ionic AlertController 組件
-
請(qǐng)求類(lèi)型JSON亮蒋、formData設(shè)置（PS：本文所使用的類(lèi)型是JSON。如果想使用formData headers 設(shè)置更改為“ x-www-form-urlencoded”即可妆毕，如果需要的話(huà)慎玖，還需要對(duì)參數(shù)做處理）
自己可參照我下圖根據(jù)代碼，根據(jù)本文所創(chuàng)建的基礎(chǔ)demo做相應(yīng)的更改以達(dá)到所期待的效果
image.png
為了更好的管理每個(gè)模塊的HTTP請(qǐng)求笛粘。建議沒(méi)一個(gè)模塊簡(jiǎn)歷一個(gè) moduleNameService趁怔。這里也不贅述了。直接貼出相應(yīng)代碼
1.統(tǒng)一管理請(qǐng)求路徑薪前。如下圖
2.moduleNameService.ts
3.使用方法（PS:紅色框外的代碼）
好了润努。到這里我http請(qǐng)求所遇到的問(wèn)題都有描述了。由于我也是才入坑ionic示括。代碼寫(xiě)的不是很規(guī)范铺浇。各位看官擔(dān)待
