本文為原創文章，轉載請標明出處

目錄

貓眼API

HttpClient 實現 HTTP 請求

• 安裝 HttpClientModule 模塊
• 創建 provider
• 創建 page

一些坑

• 坑1: 未在 app.module.ts 中導入 HttpClientModule
• 坑2: Chrome 調試時 CORS 問題
• 坑3: WKWebView 問題

更多

1. 貓眼API

當然是基于這篇古老的文章啦 ==> http://www.jianshu.com/p/9855610eb1d4
因為是2015年的文章，已經時隔2年多，很難確保API仍可使用，所以我親自進行了抓包，發現沒毛病還能用，并且還多發現了2個接口，現整理如下：

正在熱映電影列表：
http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=1
Request：

type ==> hot 類型（正在熱映） offset 初始數據位置 limit 顯示數據最大上限值

即將上映電影列表：
http://m.maoyan.com/movie/list.json?type=coming&offset=0&limit=1
Request：

type ==> coming 類型（即將上映） offset 初始數據位置 limit 顯示數據最大上限值

電影詳情：
http://m.maoyan.com/movie/342068.json
Request：
后面跟上電影id即可

最新短評列表1：
http://m.maoyan.com/comments.json?movieid=342068&offset=0&limit=1
Request：

movieid 電影id offset 初始數據位置（最大為1000） limit 顯示數據最大上限值（最大為15）

最新短評列表2：
http://m.maoyan.com/mmdb/comments/movie/342068.json?offset=0&limit=1&startTime=2017-12-01%2008:00:00
Request：
后面跟上電影id

offset 初始數據位置（最大為1000） limit 顯示數據最大上限值（最大為15） startTime 評論初始時間

評論回復列表：
http://m.maoyan.com/mmdb/replies/comment/129764411.json?offset=0&limit=1
Request：
后面跟上評論id

offset 初始數據位置 limit 顯示數據最大上限值

本地影院列表：
http://m.maoyan.com/cinemas.json
根據ip段獲取本地影院列表

放映時刻表：
http://m.maoyan.com/showtime/wrap.json?cinemaid=1181&movieid=343905
Request：

cinemaid 影院id movieid 電影id

選座購票詳情：
http://m.maoyan.com/show/seats?showId=70157&showDate=2017-12-09
Request：

showId 放映id showDate 放映時間

2. HttpClient 實現 HTTP 請求

安裝 HttpClientModule 模塊

app.module.ts

... import {HttpClientModule} from "@angular/common/http"; ...@NgModule({...imports: [...HttpClientModule,...]... }) ...

創建 provider

終端運行:

ionic g provider movies

movies.ts

import {HttpClient} from '@angular/common/http'; import {Injectable} from '@angular/core';@Injectable() export class MoviesProvider {hotMovies: any[];constructor(public http: HttpClient) {this.getHotMovies();}getHotMovies() {let hotMoviesUrl: string = "https://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=100";this.http.get(hotMoviesUrl).subscribe(data => {this.hotMovies = data["data"]["movies"];});}}

創建 page

終端運行:

ionic g page movie

movie.html

<ion-header><ion-navbar><ion-title>電影</ion-title></ion-navbar></ion-header><ion-content><ion-list><button ion-item *ngFor="let movie of moviesProvider.hotMovies">{{movie["nm"]}}</button></ion-list> </ion-content>

movie.ts

import {Component} from '@angular/core'; import {IonicPage, NavController, NavParams} from 'ionic-angular';import {MoviesProvider} from "../../providers/movies/movies";@IonicPage({priority: 'high' }) @Component({selector: 'page-movie',templateUrl: 'movie.html', }) export class MoviePage {constructor(public navCtrl: NavController, public navParams: NavParams, public moviesProvider: MoviesProvider) {}ionViewDidEnter() {console.log(this.moviesProvider.hotMovies);}}

3. 一些坑

坑1: 未在 app.module.ts 中導入 HttpClientModule

ionic g provider movies 命令執行后并未在 app.module.ts 中自動導入 HttpClientModule。

坑2: Chrome 調試時 CORS 問題

最簡單的辦法就是給 Chrome 安裝 Allow-Control-Allow-Origin 插件了，鏈接 ==> https://chrome.google.com/webstore/search/Allow-Control-Allow-Origin?hl=zh-CN 第一個就是。

坑3: WKWebView 問題

emmm… 真機調試的時候，Android 端木有問題，顯示正常，而 iOS 端啥都不顯示，不知道問題出在哪里（我懷疑是 WKWebView 的 CORS 問題，求評論！！！），我的解決辦法是，降回到 UIWebView。

首先卸載 Ionic WebView 插件

ionic cordova plugin remove cordova cordova-plugin-ionic-webview --save ionic cordova platform rm ios ionic cordova platform add ios ionic cordova build ios --prod

然后 config.xml

<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />

4. 更多

Angular - HttpClient
Angular - API - HttpClient
Ionic - WKWebView

如有不當之處，請予指正，謝謝～

總結

以上是生活随笔為你收集整理的Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。