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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

披着狼皮的羊:HP打印机远程代码执行漏洞(RCE)是这样被发现的

? 打印机作为组织机构内部不可缺少的资产设备,近年来,随着各种打印固件漏洞百出,其安全性也备受关注,打印机安全与电脑安全同等重要,不容忽视。我们注意到,惠普(...

32150
来自专栏眯眯眼猫头鹰的小树杈

vue-cli的项目结构

这篇文章对纯新手友好,所以有过任何vue开发经验的人可以出门左转啦!这篇文章献给我的homie苏蕾儿童鞋,让她在学习vue项目的时候少走一点弯路(径直冲向末路哈...

34940
来自专栏FreeBuf

「无文件」攻击方式渗透实验

前几天看了一个文章《全球上百家银行和金融机构感染了一种“无文件”恶意程序,几乎无法检测》,觉得powershell很是神奇,自己希望亲手实验一下,以最大程度还原...

51280
来自专栏黑泽君的专栏

网络通信的三要素

75750
来自专栏FreeBuf

高效的DDoS攻击探测与分析工具 – FastNetMon

FastNetMon这是一个基于多种抓包引擎(NetFlow, IPFIX, sFLOW, netmap, PF_RING, PCAP)的DoS/DDoS攻击高...

71690
来自专栏葡萄城控件技术团队

Asp.Net MVC4入门指南(7):给电影表和模型添加新字段

在本节中,您将使用Entity Framework Code First来实现模型类上的操作。从而使得这些操作和变更,可以应用到数据库中。 默认情况下,就像您在...

205100
来自专栏大魏分享(微信公众号:david-share)

Openshift 3.11的14大新功能详解

聂健是大魏的红帽同事,本文已获得授权转载,欢迎读者阅读他的技术blog:https://www.cnblogs.com/ericnie/

1.7K30
来自专栏拂晓风起

cocos2d-js 调试办法 断点调试 Android真机调试

22020
来自专栏蓝天

C/C++编程可用的Linux自带工具

GNU Binary Utilities或binutils是一整套的编程语言工具程序,用来处理许多格式的目标文件。当前的版本原本由在Cygnus Soluti...

15020
来自专栏Thinks

你的第一个渐进式网站应用(5)

渐进式网站应用会很快启动并马上可用。在目前的状态中(step-04),我们的天气app启动很快,但是不可用。因为还木有数据。 我们要使用一个AJAX请求去获取数...

9230

扫码关注云+社区

领取腾讯云代金券