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请求方法的更多相关文章

  1. HTTP请求方法详解

    HTTP请求方法详解 请求方法:指定了客户端想对指定的资源/服务器作何种操作 下面我们介绍HTTP/1.1中可用的请求方法: [GET:获取资源]     GET方法用来请求已被URI识别的资源.指定 ...

  2. HTTP请求方法

    HTTP请求方法 根据HTTP标准,HTTP请求可以使用多种请求方法. HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:OPTIONS, ...

  3. iOS开发 GET、POST请求方法(NSURLSession篇)

    NSURLConnection,在iOS9被宣布弃用,本文不使用NSURLConnection进行网络编程,有兴趣的童鞋可以参考: [iOS开发 GET.POST请求方法(NSURLConnectio ...

  4. iOS开发 GET、POST请求方法(NSURLConnection篇)

    Web Service使用的主要协议是HTTP协议,即超文本传输协议. HTTP/1.1协议共定义了8种请求方法(OPTIONS.HEAD.GET.POST.PUT.DELETE.TRACE.CONN ...

  5. HTTP协议中POST、GET、HEAD、PUT等请求方法以及一些常见错误

    (来源:http://www.tuicool.com/articles/Ermmmyn) HTTP请求方法: 常用方法: Get\Post\Head (1)Get方法. 取回请求URL标志的任何信息, ...

  6. HTTP请求响应报文&&相关状态码&&GET_POST请求方法 总结

    HTTP请求报文: 一个HTTP请求报文由四个部分组成:请求行.请求头部.空行.请求数据 1.请求行   请求行由请求方法字段.URL字段和HTTP协议版本字段3个字段组成,它们用空格分隔.比如 GE ...

  7. HTTP 笔记与总结(2 )HTTP 协议的(请求行的)请求方法 及 (响应行的)状态码

    (请求行的)请求方法 包括: GET,POST,HEAD,PUT,TRACE,DELETE,OPTIONS 注意:这些请求方法虽然是 HTTP 协议规定的,但是 Web Server 未必允许或支持这 ...

  8. httpclient请求方法

    /** * httpclient请求方法 * @param url 请求地址 * @param paramMap 请求参数 * @param ent 编码格式 gbk.utf-8 * @return ...

  9. HTTP请求方法对照表

    根据HTTP标准,HTTP请求可以使用多种请求方法. HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELE ...

随机推荐

  1. Linux之磁盘与文件系统管理

    磁盘及文件系统管理详解 [参考文献:马哥视频] 原文:http://blog.csdn.net/u013008795/article/details/51150075 目前市场上主流的磁盘是机械式硬盘 ...

  2. C# 图解教程 第四章 类的基本概念

    类的基本概念 类的概述声明类 类成员字段方法 创建变量和类的实例为数据分配内存实例成员访问修饰符 私有访问和公用访问 从类的内部访问成员从类的外部访问成员综合应用 类的基本概念 类的概述 类是一种活动 ...

  3. JS显示动态的系统时间--JavaScript基础

    1.网页中实时显示当前时间 <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  4. Bzoj1899: [Zjoi2004]Lunch 午餐

    题面 传送门 Sol 首先显然吃饭久的要排在前面 之后再来分配队伍,设\(f[i][j]\)表示到第\(i\)个人,\(A\)队伍要等\(j\)的最小吃完饭时间 那么就是一个简单的背包吧... # i ...

  5. 通过logstash-input-mongodb插件将mongodb数据导入ElasticSearch

    目的很简单,就是将mongodb数据导入es建立相应索引.数据是从特定的网站扒下来,然后进行二次处理,也就是数据去重.清洗,接着再保存到mongodb里,那么如何将数据搞到ElasticSearch中 ...

  6. Java中高级面试题

    一.基础知识: 1)集合类:List和Set比较,各自的子类比较(ArrayList,Vector,LinkedList:HashSet,TreeSet): 2)HashMap的底层实现,之后会问Co ...

  7. Nginx 配置对流量、连接和请求的限制

    首先给出配置段: http { limit_conn_zone $binary_remote_addr zone=one:10m; limit_req_zone $binary_remote_addr ...

  8. ValueError: Cannot feed value of shape ..

    这里x_,y_是两个数字,当我运行时 with tf.Session() as sess: #定义session对象生成器 for step in range(201) : sess.run(trai ...

  9. JMockit常用操作

    JMockit常用操作 2017-11-30 转自:http://blog.csdn.net/foreverling/article/details/51234149 目录 1 基本概念  1.1 常 ...

  10. Json技术使用代码示例

    json格式细节1 JSON(JavaScript Object  Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理J ...