Ionic3学习笔记(十三)HttpClient 实现 HTTP 请求以及踩过的一些坑
2017-12-13 00:00
369 查看
本文为原创文章,转载请标明出处
HttpClient 实现 HTTP 请求
安装 HttpClientModule 模块
创建 provider
创建 page
一些坑
坑1: 未在
坑2: Chrome 调试时 CORS 问题
坑3: WKWebView 问题
更多
因为是2015年的文章,已经时隔2年多,很难确保API仍可使用,所以我亲自进行了抓包,发现没毛病还能用,并且还多发现了2个接口,现整理如下:
正在热映电影列表:
http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=1
Request:
即将上映电影列表:
http://m.maoyan.com/movie/list.json?type=coming&offset=0&limit=1
Request:
电影详情:
http://m.maoyan.com/movie/342068.json
Request:
后面跟上电影id即可
最新短评列表1:
http://m.maoyan.com/comments.json?movieid=342068&offset=0&limit=1
Request:
最新短评列表2:
http://m.maoyan.com/mmdb/comments/movie/342068.json?offset=0&limit=1&startTime=2017-12-01%2008:00:00
Request:
后面跟上电影id
评论回复列表:
http://m.maoyan.com/mmdb/replies/comment/129764411.json?offset=0&limit=1
Request:
后面跟上评论id
本地影院列表:
http://m.maoyan.com/cinemas.json
根据ip段获取本地影院列表
放映时刻表:
http://m.maoyan.com/showtime/wrap.json?cinemaid=1181&movieid=343905
Request:
选座购票详情:
http://m.maoyan.com/show/seats?showId=70157&showDate=2017-12-09
Request:
坑1: 未在
首先卸载 Ionic WebView 插件
然后
Angular - API - HttpClient
Ionic - WKWebView
如有不当之处,请予指正,谢谢~
目录
猫眼APIHttpClient 实现 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 - HttpClientAngular - API - HttpClient
Ionic - WKWebView
如有不当之处,请予指正,谢谢~
相关文章推荐
- Ionic3学习笔记(十三)HttpClient 实现 HTTP 请求以及踩过的一些坑
- HttpClient 4.5版本实现文件上传下载以及常用post、get请求
- HttpClient实现网络请求
- spring MVC 管理HttpClient---实现在java中直接向Controller发送请求
- 今天用httpclient访问jenkins遇到请求被转发到登录页面,看了网上的一些教程也没能解决。后来参考了下官方文档解决了,代码如下
- HttpClient 实现跳转请求
- HTTP协议中POST、GET、HEAD、PUT等请求方法以及一些常见错误
- zz:HTTP协议中POST、GET、HEAD、PUT等请求方法以及一些常见错误
- Httpclient 实现https请求,绕过SSL 方法
- httpcomponents-client-4.3.5实现http的post请求和get请求方法
- 简单记下httpclientjava实现get,post请求
- httpclient 实现https请求
- spring MVC 管理HttpClient---实现在java中直接向Controller发送请求
- Ionic3学习笔记(十四)使用 videogular2 实现视频播放以及遇到的一些问题
- httpclient 以及 urlConnection 发送请求
- HTTP协议中常见请求方法以及一些常见错误代码
- HTTP协议中POST、GET、HEAD、PUT等请求方法以及一些常见错误
- Ionic3学习笔记(十四)使用 videogular2 实现视频播放以及遇到的一些问题
- HTTP协议中POST、GET、HEAD、PUT等请求方法以及一些常见错误
- Java HttpClient伪造请求之简易封装满足HTTP以及HTTPS请求