Ionic3学习笔记(十三)HttpClient 实现 HTTP 请求以及踩过的一些坑
本文为原创文章,转载请标明出处
目录
- 猫眼API
- HttpClient 实现 HTTP 请求
- 安装 HttpClientModule 模块
- 创建 provider
- 创建 page
- 一些坑
- 坑1: 未在
app.module.ts
中导入HttpClientModule
- 坑2: Chrome 调试时 CORS 问题
- 坑3: WKWebView 问题
- 坑1: 未在
- 更多
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 请求以及踩过的一些坑相关推荐
- PhalAPI学习笔记 ——— 第二章接口服务请求
PhalAPI学习笔记 --- 第二章接口服务请求 前言 接口服务请求 接口服务请求案例 自定义接口路由 开启匹配路由 配置路由规则 nginx apache 服务请求 结束语 前言 公司业务需要转学 ...
- Polyworks脚本开发学习笔记(十三)-深入了解MACRO命令
Polyworks脚本开发学习笔记(十三)-深入了解MACRO命令 MACRO命令中包含了很多宏脚本管理以及变量操作命令,交互操作命令等,是非常重要的一个模块. 数组和字符串操作 从数组中拿掉一个元素 ...
- OpenGL学习笔记(十三):将纹理贴图应用到四边形上,对VAO/VBO/EBO/纹理/着色器的使用方式进行总结
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7919 ...
- asp.net core webAPI学习笔记(三)资源请求
IDE 版本:Visual Studio 2017 15.9.7 asp.net core 版本 2.1.1 本文档说明需在 asp.net core webAPI学习笔记(一)项目搭建 的基础下进行 ...
- java学习笔记十三
11. 凡是继承了FilterOutputStream或FilterInputStream的类都是过滤流,也就是说他们不能直接跟目标(键盘,文件,网络等,节点流可以)数据打交道,只能包装 Intput ...
- Mr.J-- jQuery学习笔记(十三)--选项Tab卡
页面渲染 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
- 【安全牛学习笔记】CSRF跨站请求伪造攻击漏洞的原理及解决办法
CSRF跨站请求伪造攻击漏洞的原理及解决办法 CSRF,夸张请求伪造漏洞 漏洞的原理及修复方法 1.常见的触发场景 2.漏洞原理:浏览器同源策略 3.DEMO 4.漏洞危害 5.如何避免&修复 ...
- 【安全牛学习笔记】CSRF跨站请求伪造***漏洞的原理及解决办法
CSRF跨站请求伪造***漏洞的原理及解决办法 CSRF,夸张请求伪造漏洞 漏洞的原理及修复方法 1.常见的触发场景 2.漏洞原理:浏览器同源策略 3.DEMO 4.漏洞危害 5.如何避免&修 ...
- 吴恩达《机器学习》学习笔记十三——机器学习系统(补充)
这次笔记是对笔记十二的补充,之前讨论了评价指标,这次主要是补充机器学习系统设计中另一个重要的方面,用来训练的数据有多少的问题. 笔记十二地址:https://blog.csdn.net/qq_4046 ...
最新文章
- 海豚php添加一行,添加表单项通用方法-海豚PHP1.0.6完全开发手册-基于ThinkPHP5.0.10的快速开发框架...
- Runtime类与Process类
- 遗传算法求解极大值问题
- 【转】Web API项目中使用Area对业务进行分类管理
- java发送c语言结构体_C语言中结构体直接赋值?
- python itemgetter函数用法_Python itemgetter函数怎么用?
- apt报错Hash 校验和不符解决办法
- nginx的addition模块在响应的前后报文添加内容与变量的运行原理
- kotlin button_使用Kotlin和XML的Android Button
- 如何卸载eclipse?
- Windows动态桌面原理
- 基于python爬虫下载网站在线视频
- 合并两个工作表怎么做?
- 高通快速调试命令集合---持续更新
- python实例:井字棋
- 疫情最大赢家现身,不是疫苗公司,是集装箱!
- word2016修改批注名字
- php表格制作底纹怎么做,HTML表格标记教程(36):表头的背景色属性BGCOLOR
- ②号团队【扫黑除恶Team】-团队任务5:项目总结会
- 在美国读书的体会 [转]