Angular4学习笔记(五):http

原创 2017年04月17日 14:31:04

代码已提交至Github

程序猿十大未解之谜

其实我准备原本按照教程上的写法,用angular-in-memory-web-api类伪装一个服务器。而在最开始的项目里,我也确实是这么做的。

但是后来我用webpack替换了原demo中的systemjs,一切都跑偏了。

同样的代码,在之前的项目里怎么跑都没问题;在现在的项目里,死活都是服务器地址不对。

这就是程序猿十大未接谜题之首:刚才还特么是好好的啊!

最后我实在找不到问题出在那里,只好用js再写了一个跑在node上的服务器demo。

有的时候技术突破,也是被逼无奈。不是他XX的,就是你XX的。(原谅我爆粗口)。

所以我们需要小小的转一个弯,来搞定有关node服务器上的一些东西。

nodejs服务器

git上的项目中,server目录下,就是一个小小的服务器demo,运行方式为进入文件夹后npm start。

服务器包含2个文件:
这里写图片描述

data.js是我随便写的一堆假数据(是的,服务器也是假数据,因为我还不会用mongodb)

http.js是服务器主文件。

运行起来是这个样子:
这里写图片描述
服务器监听本机4000端口,并提供2个接口:
1. http://127.0.0.1:4000/gundamlist

返回所有高达列表
1. http://127.0.0.1:4000/detail?id=xx
传入高达id,返回对应高达详情(查不到会返回空的类)

angularjs中的http

现在可以回到angular的部分,开始改造service了:

1 定义主路径

private api = 'http://localhost:4000';

2 定义2个接口

private gundamList = '/gundamlist';
private gundamDeail = '/detail';

3 使用angular中的http模块

http类在angular中的‘@angular/http’里,任何使用http之前都需要导入。以及因为http本身是一个基类要在所有组件中使用,所以需要添加到app.module.ts的imports数组里。

顺便,因为在2个component都用到了service,所以不需要特别在每一个component用provider声明,在app.module.ts声明一次就可以了(但是还需要导入和注入)。

做完之前的铺垫后,终于可以在service里用http去请求数据了。

导入http:

import { Http } from '@angular/http';

必须的toPromise

import 'rxjs/add/operator/toPromise';

在构造函数中注入:

constructor(private http: Http) {};

修改获得数据的方法:

// 获得全部数据
getGundams(): Promise<Gundam[]> {
    return this.http.get(this.api + this.gundamList)
.toPromise()
.then(response => response.json() as Gundam[])
.catch(this.handleError);
}
// 根据Id查询高达
getGundamById(id: number): Promise<Gundam> {
    return this.http.get(this.api + this.gundamDeail + '?id=' + id)
.toPromise().then( jsonStr => jsonStr.json() as Gundam)
.catch(this.handleError);
}
// 捕获异常并输出
private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}

1 http.get(url)(或者post put delete),访问服务器以后会返回一个observation对象,事实上是observation<服务器返回值>。通过toPromise转换成promise对象以后,就可以正常的使用then方法去处理返回值了。
2 通过promise的then方法,可以获得到服务器的返回值。2个返回值都是json字符串,而在angular还是先按字符串处理。调用字符串的.json()方法转化为json数组(接口1)或者json对象(接口2),继续调用关键字as将jison数组或者jison对象转化Gundam类,转化的方式是属性对应。

回到主页面,刷新
这里写图片描述
点击任意一个栏目
这里写图片描述

现在可以把假数据删除,然后测试基本流程了。

webpack打包

进入angular目录,运行打包命令:

npm run build 

这里写图片描述

打包完成

这里写图片描述

进入angular/dist文件夹内,会有如下几个文件:
这里写图片描述

复制到server目录下的assets文件夹下(没有请新建):
这里写图片描述

回到服务器目录下,启动服务器:

这里写图片描述

访问http://localhost:4000/index.html

这里写图片描述

点击任一列表项目:

这里写图片描述

可能样子还不怎么好看,可能逻辑处理也很简单。但是至少是一个从前端到后端跑通的流程了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

Angular4 http服务400报错

Angular4 http请求400报错
  • qq_26626113
  • qq_26626113
  • 2017年11月08日 16:53
  • 398

Angular4 Http

  • 2017年08月10日 06:39
  • 80KB
  • 下载

Angular4学习笔记(五):http

angular4.0中有关http的使用
  • catwindboy
  • catwindboy
  • 2017年04月17日 14:31
  • 22306

Angular4学习笔记(四):service

一个service引发的解耦
  • catwindboy
  • catwindboy
  • 2017年04月17日 14:01
  • 7739

AngularJs(四):$Http,$resource

一.使用$http $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象,具有success和error两个方法。例如...
  • u014077165
  • u014077165
  • 2015年02月01日 00:50
  • 5089

angular中的http请求封装

angular4中http请求封装
  • z_alvin
  • z_alvin
  • 2017年08月19日 11:43
  • 1263

angular的http请求需要注意的地方

angular的http请求需要注意的地方
  • Fiona_lms
  • Fiona_lms
  • 2017年04月13日 21:56
  • 599

angular4开发中对请求数据层的封装

一、本章节仅仅是对angular4项目开发中数据请求封装到model中 仅仅是在项目angular4项目部署结构的基础上扩展了,根据javaweb项目开发分层来说命名service可能会好点,但是...
  • kuangshp128
  • kuangshp128
  • 2017年08月28日 17:57
  • 2443

Angular开发(十四)-利用angular的http转发、即代理http 请求,处理项目中请求跨域的问题

虽然angular的http请求中提供了jsonp处理跨域问题,但是不常用,我们web服务器端可能会选择别的方式处理web服务器端使用nginx进行反向代理处理 使用nodejs中node-http-...
  • kuangshp128
  • kuangshp128
  • 2017年05月13日 22:43
  • 4992

Angular学习:http请求失败的问题

1 问题 在学习angular时,以下代码的http的post请求一直失败。 import { Injectable } from '@angular/core'; import { Observa...
  • superpeepi_csdn
  • superpeepi_csdn
  • 2017年05月22日 13:37
  • 1340
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Angular4学习笔记(五):http
举报原因:
原因补充:

(最多只允许输入30个字)