Angular最新教程-第七节HTTP get post 设置头部 跨域访问

和angular1一样angular4也有http库，用来调用外包的API。
为了不使发起的请求，导致当前进入等待而没有响应，HTTP请求都是异步的。
这个之前我们聊过类似的，JavaScript中的异步处理方法。
1、callback回调的方式。
2、promise，这个可以参考我很早之前的一篇博客。http://blog.csdn.net/onil_chen/article/details/51099443
3、observable可观察对象。（这个后续讲解，这里先记住Angular中处理异步的最佳方式就是这个。）
（以上语言组织参考了ng-book 2）
接下来我们来讨论如何在我们的项目中使用http
跟ng1不同的是，ng1是内置的http模块。
ng4需要我们在使用之前导入HttpModule

使用@angular/http

使用request、get请求

打开\src\app\app.module.ts
头部加入import { HttpModule } from ‘@angular/http’;
在imports中加入HttpModule，如下。

然后我们就可以在任何使用依赖注入的地方使用http服务了。
这里我们先简单的实现一下。
打开\src\app\site-status\site-status.component.ts（第五节课代码http://blog.csdn.net/onil_chen/article/details/78063916）
在头部import导入http和response对象。
然后定义构造函数constructor，注入模块Http。
然后再页面初始化函数中调用，请求api。

保存运行。

这里请求报错，是因为不同源问题导致的，也就是常说的跨域。
之前1中我们处理跨域访问是使用设置CORS（全称Cross-Origin Resource Sharing）的方式来实现的。
但是这个需要服务端的支持，因为我们用的是angular中文社区的api，（我直接8的。）
所以我们使用反向代理的方式来实现。这个是angular/cli的一个内置功能。

简要说明就是在根目录创建一个文件。 proxy.conf.json，在文件里面设置代理到哪个地址。
然后在package.json中设置"start": "ng serve --proxy-config proxy.conf.json",
最后使用npm start 运行项目（注意不要直接使用ng serve，不然代理不会生效，也可以运行ng serve --proxy-config proxy.conf.json ）。

修改\src\app\site-status\site-status.component.ts中的请求地址。
然后将请求回来的数据绑定到页面上（数据要先处理，后续讲解）。

我们从浏览器的NetWork中查看一下请求。
浏览器显示我们请求的地址是http://localhost:4200/api/index

但是实际上却有数据返回，而且返回的数据是http://www.angularjs.cn上的

这里我们可以对比一下，我们本地请求的数据确实是angularjs中文社区网站的数据。

到这里我们的第一个http请求就完成了。
get和上面使用的request一样的用法。
接下来我们看如何发起post请求。

使用post请求

主要代码如下，第一个参数和get一样为请求地址。第二个参数为请求的body。第三个参数设置头部一起说。
简要例子如下：

this.http.post('/api/index',
{
  name:"xiaohuoni",
  author:"mangfu"
}).subscribe((res:Response)=>{})

使用PUT\PATCH\DELETE\HEAD

这些请求和get类似，也不常用，这里不讲解。
可查阅api或者在编译器中查看，如上图post。

设置头部

我们刚刚在查阅post的参数说明时，最后一个参数，是options?:RequestOptionsArgs
其实所有的http方法的最后一个参数都是它。
RequestOptionsArgs其实是请求对象的封装。
里面包括method、headers、body、mode、credentials、cache、url、search
以下我们以设置headers为例。

不要忘了在头部加入import { Http , Response ,Headers} from '@angular/http';

源代码：百度云 链接：http://pan.baidu.com/s/1jHYc8g2 密码：xjj6
码云：https://gitee.com/xiaohuOni/oniplan-ng
有码云的帮忙给个star，感谢。

这节课的内容就到这里完成了。
感谢您的阅读。
我是莽夫，希望你开心。
如果你觉得本文对你有帮助，请扫描文末二维码，支持博主原创。
希望大家关注我的个人公众号ionic_

转载于:https://my.oschina.net/xiaohuoni/blog/1547938