Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑

本文为原创文章，转载请标明出处

目录

1. 猫眼API
2. HttpClient 实现 HTTP 请求
   • 安装 HttpClientModule 模块
   • 创建 provider
   • 创建 page
3. 一些坑
   • 坑1: 未在 app.module.ts 中导入 HttpClientModule
   • 坑2: Chrome 调试时 CORS 问题
   • 坑3: WKWebView 问题
4. 更多

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 电影idoffset ?初始数据位置（最大为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 ???影院idmovieid ????电影id

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

showId ?????放映idshowDate ???放映时间

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 --saveionic cordova platform rm iosionic cordova platform add iosionic cordova build ios --prod

然后 config.xml

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

4. 更多

Angular - HttpClient
Angular - API - HttpClient
Ionic - WKWebView

如有不当之处，请予指正，谢谢～