angular2 学习笔记 ( Http 请求)
更新 : 2024-08-21
请看新版本:Angular 18+ 高级教程 – HttpClient
更新 : 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 { }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
2014-08-28 javascript 要注意的事项
2014-08-28 ngRoute 路由