更新 : 2017-06-08 

总觉得 angular 的 http 怎么就多了 Request, Headers, Response 这些麻烦东东呢.

原来这些都是游览器的“新特性” Fetch API. 其实很久了,只是我不知道而已,哈哈。

Fetch API 和以前的 xmlhttprequest 主要功能是一样的,就是发请求.

不同的地方是Fetch 是基于 promise 的,而且可以配合 service worker, stream, cache 之类的 "新特性" 打出连环计.

它也是有不足的地方,比如没办法 abort 和 progress (不确定目前有了没有 /.\)

有兴趣的朋友可以多留意这些 "新特性" 哦.

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 服务器. 不过我没有用 ^^".

例子 :

1.Headers and Params

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());
}); 

2.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...
});

3.get CSV

let options = new RequestOptions({ responseType: ResponseContentType.Text });
this.http.get("/demo.csv", options).toPromise().then((response) => {console.log(response.text());
}); 

4.by 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...
});

5. Upload file

<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 会帮我们写好的.

拦截

不像 ng1 那样,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 { }

转载于:https://www.cnblogs.com/keatkeat/p/5814708.html

angular2 学习笔记 ( Http 请求)相关推荐

  1. VBA 学习笔记 - 网络请求

    VBA 学习笔记 - 网络请求 Microsoft.XMLHTTP MSXML2.serverXMLHTTP.6.0 WinHttp.WinHttpRequest.5.1 参考资料 Microsoft ...

  2. Angular2学习笔记——NgModule

    在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...

  3. Angular2学习笔记——在子组件中拿到路由参数

    工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig ...

  4. angular2 学习笔记 ( unit test 单元测试 )

    更新 2018-06-03 spy object 当组件或则服务有对其它服务依赖的时候,我们通常会把这些依赖写成 spy 或则叫 fake. 为什么这样做的呢 ? 主要的原因是我们不应该依赖具体的代码 ...

  5. ng bootstrap css,Angular2学习笔记-ng bootstrap中motal组件使用

    ng bootstrap是一个angular UI bootstrap库,里面包含了一些基本的UI组件(日期选择组件,按钮,下拉框等).目前的版本为v1.0.0-alpha.14,基于angular2 ...

  6. angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )

    Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库 在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...

  7. Angular2学习笔记(六) Angular2 依赖注入

    2019独角兽企业重金招聘Python工程师标准>>> 在java的世界中我们有spring的DI神器,而在angular的世界中我们同样有DI,由于这里文章篇幅偏大,只捡主要的讲解 ...

  8. angular2学习笔记之服务和http

    现在应用开发多为spa的前后分离,前后端通讯则使用http的接口通过json进行交互.angular2-demo 一. 效果图 1. 展现出来的效果 2. mysql的数据 二.代码实例 1. 服务 ...

  9. Servlet和HTTP请求协议-学习笔记02【Servlet_体系结构与urlpartten配置、HTTP请求协议】

    Java后端 学习路线 笔记汇总表[黑马程序员] Servlet和HTTP请求协议-学习笔记01[Servlet_快速入门-生命周期方法.Servlet_3.0注解配置.IDEA与tomcat相关配置 ...

最新文章

  1. Ptthon学习记录(八)-------list和元组
  2. c从sqlite3数据库中获取数据,并对数据进行拼接
  3. 生成 PDF 全攻略【1】初体验
  4. 业界率先支持 MCP-OVER-XDS 协议,Nacos 2.0.1 + 1.4.2 Release 正式发布
  5. 用postman在CSDN上创建博客
  6. JavaFX加载界面报错:fxcontroller can only be applied to root element?
  7. js window.open 参数设置
  8. 手用计算机怎么弄声音,计算器怎么调声音
  9. VIN码识别,车架号识别,移动端VIN码识别独家支持云识别
  10. CSS 样式书写规范,css样式书写规范
  11. linux c 获取进程p id,详解Linux获取线程的PID(TID、LWP)的几种方式
  12. raptor流程图编程
  13. php header 生成pdf,使用PHP生成PDF文档
  14. C语言:判断质数合数的代码
  15. hg版本管理工具使用
  16. 如何隐藏控制台程序的窗口
  17. 在 Adob​​e MAX 深入研究 UI/UX 设计
  18. spring中使用Aspectj进行切面编程
  19. python获取图片名称_python提取图像的名字*.jpg到txt文本的方法
  20. L2-020 功夫传人 (25分)(双解法 完整思路+极短代码)

热门文章

  1. 1. Action 实现 ModelDriven 接口后的运行流程
  2. JS、Flash 实现复制功能 (浏览器兼容)
  3. Qt学习之路(29): 绘图设备
  4. 移动全平台性能测试工具PerfDog--安装及运行
  5. 多线程 python tcp 图片_Python第四周之网络编程TCP (服务器/客户端; 线程下载图片;线程版服务器和客户端(单人、多人)) UDP...
  6. Kali Linux 2020.1安装桌面
  7. Xamarin图表开发基础教程(4)OxyPlot框架
  8. ARP协议全面实战手册——Wireshark的安装第一更
  9. 交换机和路由器的区别_路由器与交换机的区别?
  10. ubuntu20输入法qiehuan_ubuntu20.04中文输入法安装步骤