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


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

目录
相关文章
HTTP协议中请求方式GET 与 POST 什么区别 ?
GET和POST的主要区别在于参数传递方式、安全性和应用场景。GET通过URL传递参数,长度受限且安全性较低,适合获取数据;而POST通过请求体传递参数,安全性更高,适合提交数据。
1010 2
|
UED
在 angular 中设置合适的变更检测策略
【10月更文挑战第4天】
621 156
|
API 开发者
了解 HTTP 的PUT 与 POST方法的综合指南
HTTP PUT 和 POST 方法是构建 Web 应用与 API 的核心工具,用于资源的创建与更新。PUT 方法通过指定 URL 更新或创建完整资源,具有幂等性;而 POST 方法更灵活,主要用于创建新资源,但不具备幂等性。本文详细对比了两者在请求体、URL 使用、资源处理等方面的区别,并提供了实际应用示例,帮助开发者根据场景选择合适的方法以优化 API 设计。
1254 13
|
缓存 JSON 安全
Http自定义Header导致的跨域问题
在Web开发中,正确处理跨域问题是确保应用安全和性能的重要环节。通过在服务器端设置适当的CORS头信息,处理预检请求,并遵循最佳实践,可以有效解决自定义Header导致的跨域问题,提高应用的安全性和用户体验。理解并掌握这些技巧,对于构建高效、可靠的Web应用至关重要。
1296 11
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
缓存 安全 API
http 的 get 和 post 区别 1000字
【10月更文挑战第27天】GET和POST方法各有特点,在实际应用中需要根据具体的业务需求和场景选择合适的请求方法,以确保数据的安全传输和正确处理。
|
JSON 编解码 安全
【HTTP】方法(method)以及 GET 和 POST 的区别
【HTTP】方法(method)以及 GET 和 POST 的区别
747 1
|
前端开发 JavaScript
node反向代理,解决跨域(http-proxy-middleware)
使用node.js和http-proxy-middleware库实现反向代理,解决跨域问题,允许前端请求通过代理访问不同端口的服务。
1084 3
|
SEO 搜索推荐 数据采集
让 JSF 应用秒变搜索引擎宠儿!揭秘 SEO 优化的神奇魔法,让你的网站脱颖而出!
【8月更文挑战第31天】随着互联网的发展,搜索引擎已成为用户获取信息的主要途径,SEO 对 Web 应用至关重要。本文介绍如何提升 JavaServer Faces(JSF)应用的 SEO 友好性,包括关键词优化、网页结构优化和外部链接建设等基础知识,并提出了使用语义化 HTML 标签、优化页面标题和描述、生成静态 HTML 页面及 URL 重写等具体策略,帮助您的网站在搜索引擎中获得更高排名。
291 0
|
安全 开发者
精通Angular路由管理:从基础设置到高级配置,打造复杂SPA导航系统的全方位指南
【8月更文挑战第31天】在单页应用(SPA)中,路由管理至关重要。Angular通过其强大的路由模块提供灵活高效的解决方案。本文通过代码示例详细介绍如何在Angular中设置和管理路由,包括基础路由配置、懒加载、路由保护及高级配置,帮助开发者构建高效安全的导航系统,满足复杂SPA需求。随着Angular的发展,路由管理将更加完善,值得持续关注。
406 0

热门文章

最新文章