请求方式:request和 get、post、put
angular 的 http 多了 Request, Headers, Response ,这些都是游览器的“新特性” Fetch API.
Fetch API 和以前的 xmlhttprequest 主要功能是一样的,就是发请求.
不同的地方是Fetch 是基于 promise 的,而且可以配合 service worker, stream, cache 之类的 "新特性" 打出连环计.
refer :
https://angular.cn/docs/ts/latest/guide/server-communication.html
https://xgrommx.github.io/rx-book/index.html
http://wiki.jikexueyuan.com/project/android-weekly/issue-145/introduction-to-RP.html
下面记入一些例子和小区别 :
不同的地方 :
1.不支持 ng1 的 interceptor 拦截和 transformations (要自己实现可以试着继承 http 服务来扩展)
2.默认结合rxjs (也可以很容易的转化回熟悉的 Promise)
提醒:
1.XSRF 和 ng1 一模一样
2.ng 有一个内存 WebAPI 服务 ( in-memory web api service ),可以模拟后端的 Web API 服务器. 不过我没有用 ^^".
例子 :
一、request
注意: get,post,put,delete 最终也是会调用 request 方法
代码
let options = new RequestOptions({
method: RequestMethod.Post,
url: "/api/products",
headers: new Headers({ 'Content-Type': 'application/json' }),
body: JSON.stringify({ code: "mk200" })
});
this.http.request(new Request(options)).toPromise().then((response) => {
//do something...
});
二、具体方法
1.get
1.1、参数和请求头
代码
let headers = new Headers({ "myHeader": "myValue" });
headers.append("Accept", "application/json");
let params = new URLSearchParams();
params.set('myParam', 'myValue');
let options = new RequestOptions({ headers: headers, search: params });
this.http.get("/api/products", options).toPromise().then((response) => {
console.log(response.json());
});
1.2、get CSV
let options = new RequestOptions({ responseType: ResponseContentType.Text });
this.http.get("/demo.csv", options).toPromise().then((response) => {
console.log(response.text());
});
2.POST
2.1、普通post
代码
let body = JSON.stringify({
code : "mk200"
});
let headers = new Headers({ 'Content-Type': 'application/json' }); //其实不表明 json 也可以, ng 默认好像是 json
let options = new RequestOptions({ headers: headers });
this.http.post("/api/products", body, options).toPromise().then((response) => {
//do something...
});
2.2、上传文件
<input type="file" (change)="onFileChanged($event.target.files)" placeholder="Upload file" accept="image/*">
代码
onFileChanged(fileList: FileList) {
if (fileList.length > 0) {
let file: File = fileList[0];
let formData: FormData = new FormData();
formData.append('uploadFile', file, file.name);
let headers = new Headers({
"Accept": "application/json"
});
let options = new RequestOptions({ headers });
this.http.post("https://localhost:44372/api/uploadFile", formData, options)
.map(res => res.json())
.catch(error => Observable.throw(error))
.subscribe(
data => console.log('success' + data),
error => console.log(error)
)
}
}
代码
ng 支持 formData, 关键就是别自己去写 Content-Type header, ng 会帮我们写好的.
三、拦截
ng 并没有给我们一个拦截的接口, 不过我们可以通过简单的继承+override 来达到目的.
refer : http://stackoverflow.com/questions/34934009/handling-401s-globally-with-angular-2
代码
import { Injectable } from '@angular/core';
import { Http as NgHttp, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response } from "@angular/http";
import { Observable } from "rxjs/Observable";
@Injectable()
export class Http extends NgHttp {
constructor(backend: XHRBackend, defaultOptions: RequestOptions) {
super(backend, defaultOptions);
}
get(url: string, options?: RequestOptionsArgs): Observable<Response>
{
console.log("in");
return super.get(url,options);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
console.log("in2");
return super.request(url, options).catch((error: Response) => {
console.log(error);
return Observable.throw(error);
});
}
}
代码
因为get,post,put,delete 最终也是会调用 request 方法, 所以我们可以在 request 做大部分的拦截.
typescript 中 override 父类方法不需要写什么 virtual, override 之类的, 直接写方法就可以了, 内部通过 super.method() 来调用父类方法, 不是 super() 哦.
我们有 2 个选择来调用这个 http, 第一就是声明我们的 service, 其二是覆盖 ng 的 Http service.
代码
import { Http as StoogesHttp } from "./http.service";
import { Http } from "@angular/http";
@NgModule({
imports: [StoogesModule, DebugRoutingModule],
exports: [],
declarations: [DebugComponent],
providers: [{ provide : Http, useClass : StoogesHttp }] //这样就覆盖掉了. 可以参考我写的 angular2 依赖注入
})
export class DebugModule {
}
请求方式:request和 get、post、put相关推荐
- put请求方式参数如何传_TP5请求(request)变量
可以通过Request对象完成全局输入变量的检测.获取和安全过滤,支持包括$_GET.$_POST.$_REQUEST.$_SERVER.$_SESSION.$_COOKIE.$_ENV等系统变量,以 ...
- Javaweb-Servlet总结(概述、接口使用、配置、获取请求方式、路径操作、Request对象、Response对象)
文章目录 Servlet概述 Servlet核心接口和类 三种自定义Servlet接口的方法 1.实现Servlet接口 2.继承GenericServlet抽象类 3.继承HttpServlet抽象 ...
- 使用request对象实现注册实例,请求方式编码的问题
1.注册 register.jsp ,show.jsp WebContent/register.jsp: WebContent/show.jsp: http://localhost:8888/MyJ ...
- uni-app request POST 请求方式不加 header头会默认为 OPTIONS
背景: 鄙人在测试 uniapp 的使用时,发现以 POST 方式进行网络请求时,如果不添加 header 头 是无法进行正常的网络请求的,此时默认的请求方式被认定为 OPTIONS uni.requ ...
- 爬虫实战学习笔记_6 网络请求request模块:基本请求方式+设置请求头+获取cookies+模拟登陆+会话请求+验证请求+上传文件+超时异常
1 requests requests是Python中实现HTTP请求的一种方式,requests是第三方模块,该模块在实现HTTP请求时要比urlib.urllib3模块简化很多,操作更加人性化. ...
- unity3d 切换网络_Unity3d新网络请求方式UnityWebRequest详解
Unity将要逐步放弃www网络请求api,新的api请求方式来临:UnityWebRequestThe,也正是本篇文章要给大家介绍的重点,那就是UnityWebRequestThe的使用详解. 旧的 ...
- Flask一:安装初始,return方式,Request,Jinja2,session
一:安装和初始 1.Flask 安装 + 启动from flask import Flaskapp = Flask(__name__) # 实例化flask对象 # __name__ 多app应用,分 ...
- SpringMVC总结三:请求Controller返回视图类型以及请求方式、参数介绍
视图解析,请求Controller返回的视图类型: @Controller @RequestMapping("/test") public class TestController ...
- Python爬虫入门必学知识:Requests的三种参数请求方式
URL参数请求: import requests''' URL Parameters 请求方式: URL参数 例如: 以get 方式请求http://httpbin.org/get?first_nam ...
- Express中app.use中间件的用法-匹配所有的请求方式
场景 Node的Web应用框架Express的简介与搭建HelloWorld: Node的Web应用框架Express的简介与搭建HelloWorld_霸道流氓气质的博客-CSDN博客 Express ...
最新文章
- 商业领袖摘下帽子才能炼成极致
- Java接口存在的意义以及如何解决菱形继承问题
- Go——cron定时任务Demo
- 最近整理关于SQL Server2005性能优化技巧
- vmware克隆Centos6.4虚拟机网卡无法启动问题
- Windows网络驱动、NDIS驱动(微端口驱动、中间层驱动、协议驱动)、TDI驱动(网络传输层过滤)、WFP(Windows Filtering Platfrom))
- 美育在计算机教育中应用,在现代教育技术中绽放数学美育之花
- 《leetcode : 647. 回文子串 思考分析双指针解法》
- bzoj 3585 mex
- 组件:slot插槽、组件:组合slot
- android 手机 跑分榜,安兔兔跑分最新排行图 2020年4月Android手机性能榜
- GCC 编译 --sysroot
- Java编程经典10道_10道经典java编程笔试题
- iOS内存管理部分内容
- SpringCloud微服务(02):Ribbon和Feign组件,实现服务调用的负载均衡
- 极客大学架构师训练营 加密技术 高可用系统的度量 高可用系统的架构 高可用系统的运维 第22课 听课总结
- 【软件工程】-项目开发计划
- 天涯红旗linux,红旗linux安装中的几点技巧(转载)
- Blowfish简介
- 认知系列4: 《认知突围》笔记