• 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请求

    打开srcappapp.module.ts
    头部加入import { HttpModule } from ‘@angular/http’;
    在imports中加入HttpModule,如下。
    这里写图片描述
    然后我们就可以在任何使用依赖注入的地方使用http服务了。
    这里我们先简单的实现一下。
    打开srcappsite-statussite-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 )。
    这里写图片描述
    修改srcappsite-statussite-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)=>{})
    

    使用PUTPATCHDELETEHEAD

    这些请求和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_
    这里写图片描述

  • 相关阅读:
    bootstrap table load属性
    Jquery中hide()、show()、remove()特性
    Jquery精准计算
    .nojekyll 文件是什么
    快来用 Nuxt 开发静态网站
    CI:持续集成
    把组件库发布到 npm
    JS的各种模块化规范
    打包发布:让组件库支持按需加载
    docz: 组件库文档 so easy!
  • 原文地址:https://www.cnblogs.com/xiaohuoni/p/7642250.html
Copyright © 2020-2023  润新知