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

简介: 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,如下。

image.png

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

image.png

保存运行。

image.png

这里请求报错,是因为不同源问题导致的,也就是常说的跨域。
之前1中我们处理跨域访问是使用设置CORS(全称Cross-Origin Resource Sharing)的方式来实现的。


但是这个需要服务端的支持,因为我们用的是angular中文社区的api,(我直接8的。)
所以我们使用反向代理的方式来实现。这个是angular/cli的一个内置功能。

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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


使用post请求

image.png

主要代码如下,第一个参数和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为例。

image.png

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


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


这节课的内容就到这里完成了。
感谢您的阅读。
我是莽夫,希望你开心。

目录
相关文章
|
3月前
|
监控 安全 搜索推荐
设置 HTTPS 协议以确保数据传输的安全性
设置 HTTPS 协议以确保数据传输的安全性
|
5天前
|
网络协议 应用服务中间件 网络安全
免费泛域名https证书教程—无限免费续签
随着互联网安全意识提升,越来越多网站采用HTTPS协议。本文介绍如何通过JoySSL轻松获取并实现免费泛域名SSL证书的无限续签。JoySSL提供永久免费通配符SSL证书,支持无限制域名申请及自动续签,全中文界面适合国内用户。教程涵盖注册账号、选择证书类型、验证域名所有权、下载与安装证书以及设置自动续签等步骤,帮助网站简化SSL证书管理流程,确保长期安全性。
|
27天前
|
关系型数据库 MySQL Java
Servlet+MySQL增删改查 原文出自[易百教程] 转载请保留原文链接: https://www.yiibai.com/geek/1391
对于任何项目开发,创建,读取,更新和删除(CRUD)记录操作是应用程序的一个最重要部分。
64 20
|
23天前
|
安全 数据安全/隐私保护
IP地址https证书免费申请教程
本教程详细介绍如何免费申请IP地址HTTPS证书,涵盖准备、申请、审核、下载与部署阶段。从确认IP地址、选择CA、注册账户到验证控制权,最后完成证书部署,确保数据传输安全。注意证书有效期较短,需及时续签。
|
1月前
|
前端开发 JavaScript Java
如何捕获和处理HTTP GET请求的异常
如何捕获和处理HTTP GET请求的异常
|
1月前
|
安全 网络安全 数据安全/隐私保护
政务内网实现https访问教程
政务内网实现HTTPS访问需经过多个步骤:了解HTTPS原理,选择并申请适合的SSL证书,配置SSL证书至服务器,设置端口映射与访问控制,测试验证HTTPS访问功能,注意证书安全性和兼容性,定期备份与恢复。这些措施确保了数据传输的安全性,提升了政务服务的效率与安全性。
|
1月前
|
安全 网络安全 数据安全/隐私保护
内网IP地址实现HTTPS加密访问教程
在内网环境中,为确保数据传输的安全性,绑定SSL证书搭建HTTPS服务器至关重要。本文介绍了内网IP地址的前期准备、申请SSL证书的步骤以及客户端配置方法。具体包括选择合适的CA、注册账号、提交申请、下载证书,并在客户端导入根证书,确保通信数据的安全加密。推荐使用JoySSL提供的技术解决方案,确保内网设备通信安全。
内网IP地址实现HTTPS加密访问教程
|
1月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
1月前
|
缓存 安全 API
http 的 get 和 post 区别 1000字
【10月更文挑战第27天】GET和POST方法各有特点,在实际应用中需要根据具体的业务需求和场景选择合适的请求方法,以确保数据的安全传输和正确处理。
|
2月前
|
JSON 编解码 安全
【HTTP】方法(method)以及 GET 和 POST 的区别
【HTTP】方法(method)以及 GET 和 POST 的区别
131 1