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,感谢。


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

目录
相关文章
|
10天前
|
前端开发 JavaScript
node反向代理,解决跨域(http-proxy-middleware)
使用node.js和http-proxy-middleware库实现反向代理,解决跨域问题,允许前端请求通过代理访问不同端口的服务。
18 3
|
2月前
|
缓存 负载均衡 安全
|
2月前
|
SQL 存储 小程序
【教程】navicat配合HTTP通道远程连接SQLite数据库
本文介绍了如何通过 Navicat Premium 工具配合 n_tunnel_sqlite.php 和 HTTP 通道远程连接服务器上的 SQLite 数据库。SQLite 是一种自给自足的、无服务器的 SQL 数据库引擎,由于其端口未对外开放,直接使用 Navicat 进行远程连接不可行。文章详细记录了使用 HTTP 通道实现远程连接的过程,包括定位本地 `ntunnel_sqlite.php` 文件,将其上传至服务器,并通过 Navicat 配置 HTTP 通道连接 SQLite 数据库的具体步骤。
52 0
【教程】navicat配合HTTP通道远程连接SQLite数据库
|
3月前
|
JSON 网络协议 安全
《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(1)-HTTP和HTTPS基础知识
【7月更文挑战第16天】本文介绍了HTTP和HTTPS协议的基本概念与作用,强调了理解HTTP协议对使用抓包工具Fiddler的重要性。HTTP是用于Web浏览器与服务器间信息传输的协议,不加密,易被截取,不适合传输敏感信息。HTTPS是HTTP的安全版,通过SSL/TLS提供加密和服务器身份验证,确保数据安全。HTTP请求包括请求行、请求头、空行和可选的请求主体,响应则有响应行、响应头、空行和响应主体。HTTP协议无状态,而HTTPS解决了安全性问题,但也带来了额外的计算开销。Fiddler作为一个强大的抓包工具,可以帮助开发者和测试人员分析HTTP/HTTPS通信,理解请求和响应的结构。
60 4
《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(1)-HTTP和HTTPS基础知识
|
2月前
|
Java 数据库连接 数据库
强强联手!JSF 与 Hibernate 打造高效数据访问层,让你的应用如虎添翼,性能飙升!
【8月更文挑战第31天】本文通过具体示例详细介绍了如何在 JavaServer Faces (JSF) 应用程序中集成 Hibernate,实现数据访问层的最佳实践。首先,创建一个 JSF 项目并在 Eclipse 中配置支持 JSF 的服务器版本。接着,添加 JSF 和 Hibernate 依赖,并配置数据库连接池和 Hibernate 配置文件。然后,定义实体类 `User` 和 DAO 类 `UserDAO` 处理数据库操作。
51 0
|
2月前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
37 0
|
2月前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
37 0
|
2月前
|
前端开发 UED
Angular 动画教程超赞!掌握让应用更具交互性的技巧,开启精彩的前端动画之旅!
【8月更文挑战第31天】在现代前端开发中,提升用户体验至关重要,而动画是增强应用交互性的有效手段。Angular 提供了强大的动画功能,可轻松添加各种动画效果。本文介绍了 Angular 动画的基本概念、使用动画模块、事件触发动画、动画序列与并行执行、性能优化及结合第三方动画库等最佳实践。通过遵循这些实践,可以充分发挥 Angular 动画的优势,提升用户体验。下面是一个简单的示例应用,展示了如何使用 Angular 动画实现元素的显示和隐藏效果。
27 0
|
2月前
|
运维 Serverless 调度
函数计算产品使用问题之怎么在HTTP触发的函数里添加或读取自定义头部
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
2月前
|
负载均衡 Java API
深度解析SpringCloud微服务跨域联动:RestTemplate如何驾驭HTTP请求,打造无缝远程通信桥梁
【8月更文挑战第3天】踏入Spring Cloud的微服务世界,服务间的通信至关重要。RestTemplate作为Spring框架的同步客户端工具,以其简便性成为HTTP通信的首选。本文将介绍如何在Spring Cloud环境中运用RestTemplate实现跨服务调用,从配置到实战代码,再到注意事项如错误处理、服务发现与负载均衡策略,帮助你构建高效稳定的微服务系统。
57 2