Ionic3的HTTP请求方法
Ionic的http请求方法,一种是使用Ionic的Native的Http方法,另一种是使用Angular的Http请求方法。
第一种真的是看着文档都实现不了,很奇怪的错(官网文档:https://ionicframework.com/docs/native/http/),不知道缺少了什么,这种方式就先不研究了
第二种Angular的请求方法又有两种,一种是使用HttpModule 的方式,现在网上大多数的介绍都是如此,但是在新版本中这种方法已经不推荐了,推荐的是另一种使用HttpClientModule 方式
HttpModule方式
import { HttpModule } from '@angular/http';
在app.module.ts 文件中添加
...
import { HttpProvider } from '../providers/http/http';
import { HttpModule } from '@angular/http'; @NgModule({
...
imports: [
...
HttpModule,
],
...
providers: [
...
HttpProvider
]
})
export class AppModule {}
在http.ts文件中
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map'; @Injectable()
export class HttpProvider { path: string = 'https://randomuser.me/api/?results=25'; constructor(public http: Http) {
console.log('Hello HttpProvider Provider');
} loadUsers(){
return this.http.get(this.path).map(res => res.json(), err => {
console.log(err);
})
} }
在调用HTTP请求的页面中 test.ts
import {Component} from '@angular/core';
import {HttpProvider} from "../../providers/http/http"; @Component({
selector: 'page-test',
templateUrl: 'test.html',
}) export class TestPage { constructor(public http: HttpProvider) {
} f(){
this.http.loadUsers().subscribe(res => {
console.log(res.results);
},
err => {
console.log(err);
});
}
}
但是在新版的angular中,已经不推荐使用这种方法了
HttpClientModule方式
官网文档:https://angular.io/tutorial/toh-pt6
这种方法不但推荐,而且使用起来非常简单
import { HttpClientModule } from '@angular/common/http';
在app.module.ts 文件中添加
...
import {HttpClientModule} from '@angular/common/http'; @NgModule({
...
imports: [
...
HttpClientModule,
],
...
})
在调用HTTP请求的页面中 test.ts
import {Component} from '@angular/core';
import {HttpClient} from "@angular/common/http"; @Component({
selector: 'page-test',
templateUrl: 'test.html',
}) export class TestPage {
path: string = 'https://randomuser.me/api/?results=25'; constructor(private http: HttpClient) {
} f(){
this.http.get(this.path)
.subscribe(data => {
console.log(data);
});
}
}
原创文章,欢迎转载,转载请注明出处!
Ionic3的HTTP请求方法的更多相关文章
- HTTP请求方法详解
HTTP请求方法详解 请求方法:指定了客户端想对指定的资源/服务器作何种操作 下面我们介绍HTTP/1.1中可用的请求方法: [GET:获取资源] GET方法用来请求已被URI识别的资源.指定 ...
- HTTP请求方法
HTTP请求方法 根据HTTP标准,HTTP请求可以使用多种请求方法. HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:OPTIONS, ...
- iOS开发 GET、POST请求方法(NSURLSession篇)
NSURLConnection,在iOS9被宣布弃用,本文不使用NSURLConnection进行网络编程,有兴趣的童鞋可以参考: [iOS开发 GET.POST请求方法(NSURLConnectio ...
- iOS开发 GET、POST请求方法(NSURLConnection篇)
Web Service使用的主要协议是HTTP协议,即超文本传输协议. HTTP/1.1协议共定义了8种请求方法(OPTIONS.HEAD.GET.POST.PUT.DELETE.TRACE.CONN ...
- HTTP协议中POST、GET、HEAD、PUT等请求方法以及一些常见错误
(来源:http://www.tuicool.com/articles/Ermmmyn) HTTP请求方法: 常用方法: Get\Post\Head (1)Get方法. 取回请求URL标志的任何信息, ...
- HTTP请求响应报文&&相关状态码&&GET_POST请求方法 总结
HTTP请求报文: 一个HTTP请求报文由四个部分组成:请求行.请求头部.空行.请求数据 1.请求行 请求行由请求方法字段.URL字段和HTTP协议版本字段3个字段组成,它们用空格分隔.比如 GE ...
- HTTP 笔记与总结(2 )HTTP 协议的(请求行的)请求方法 及 (响应行的)状态码
(请求行的)请求方法 包括: GET,POST,HEAD,PUT,TRACE,DELETE,OPTIONS 注意:这些请求方法虽然是 HTTP 协议规定的,但是 Web Server 未必允许或支持这 ...
- httpclient请求方法
/** * httpclient请求方法 * @param url 请求地址 * @param paramMap 请求参数 * @param ent 编码格式 gbk.utf-8 * @return ...
- HTTP请求方法对照表
根据HTTP标准,HTTP请求可以使用多种请求方法. HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELE ...
随机推荐
- Linux之磁盘与文件系统管理
磁盘及文件系统管理详解 [参考文献:马哥视频] 原文:http://blog.csdn.net/u013008795/article/details/51150075 目前市场上主流的磁盘是机械式硬盘 ...
- C# 图解教程 第四章 类的基本概念
类的基本概念 类的概述声明类 类成员字段方法 创建变量和类的实例为数据分配内存实例成员访问修饰符 私有访问和公用访问 从类的内部访问成员从类的外部访问成员综合应用 类的基本概念 类的概述 类是一种活动 ...
- JS显示动态的系统时间--JavaScript基础
1.网页中实时显示当前时间 <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
- Bzoj1899: [Zjoi2004]Lunch 午餐
题面 传送门 Sol 首先显然吃饭久的要排在前面 之后再来分配队伍,设\(f[i][j]\)表示到第\(i\)个人,\(A\)队伍要等\(j\)的最小吃完饭时间 那么就是一个简单的背包吧... # i ...
- 通过logstash-input-mongodb插件将mongodb数据导入ElasticSearch
目的很简单,就是将mongodb数据导入es建立相应索引.数据是从特定的网站扒下来,然后进行二次处理,也就是数据去重.清洗,接着再保存到mongodb里,那么如何将数据搞到ElasticSearch中 ...
- Java中高级面试题
一.基础知识: 1)集合类:List和Set比较,各自的子类比较(ArrayList,Vector,LinkedList:HashSet,TreeSet): 2)HashMap的底层实现,之后会问Co ...
- Nginx 配置对流量、连接和请求的限制
首先给出配置段: http { limit_conn_zone $binary_remote_addr zone=one:10m; limit_req_zone $binary_remote_addr ...
- ValueError: Cannot feed value of shape ..
这里x_,y_是两个数字,当我运行时 with tf.Session() as sess: #定义session对象生成器 for step in range(201) : sess.run(trai ...
- JMockit常用操作
JMockit常用操作 2017-11-30 转自:http://blog.csdn.net/foreverling/article/details/51234149 目录 1 基本概念 1.1 常 ...
- Json技术使用代码示例
json格式细节1 JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理J ...