angular2中Http请求原理与用法详解

转载  更新时间:2018年01月11日 12:23:26   作者:CPlusPlusLove   我要评论

这篇文章主要介绍了angular2中Http请求原理与用法,结合实例形式分析了AngularJS中http相关模块实现http服务请求与相应的相关操作技巧,需要的朋友可以参考下

本文实例讲述了angular2中Http请求原理与用法。分享给大家供大家参考,具体如下:

提供HTTP服务

HttpModule并不是Angular的核心模块。 它是Angular用来进行Web访问的一种可选方式,并位于一个名叫@angular/http的独立附属模块中.

编辑app.module.ts

import { HttpModule, JsonpModule } from '@angular/http';
@NgModule({
 imports: [
  HttpModule,
  JsonpModule
 ],
})

angular-in-memory-web-api

npm install angular-in-memory-web-api --save-dev

This in-memory web api service processes an HTTP request and returns an Observable of HTTP Response object in the manner of a RESTy web api.

:base/:collectionName/:id?
GET api/heroes     // all heroes
GET api/heroes/42    // the character with id=42
GET api/heroes?name=^j // 'j' is a regex; returns heroes whose name starting with 'j' or 'J'
GET api/heroes.json/42 // ignores the ".json"

之前测试时用的app/mock/user_data_memory_mock.ts数据

import {User} from '../model/User';
import { InMemoryDbService } from 'angular-in-memory-web-api';
export class UserDataMemoryMock implements InMemoryDbService{
 createDb() {
  const users: User[] = [
    new User('chenjianhua_a', 21, '2290910211@qq.com', '123456'),
    new User('chenjianhua_b', 22, '2290910211@qq.com', '123456'),
    new User('chenjianhua_c', 23, '2290910211@qq.com', '123456'),
    new User('chenjianhua_d', 24, '2290910211@qq.com', '123456'),
    new User('chenjianhua_e', 25, '2290910211@qq.com', '123456'),
    new User('chenjianhua_f', 26, '2290910211@qq.com', '123456'),  
  ];
  return {users};
 }
}

编辑app.module.ts

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { UserDataMemoryMock } from './mock/user_data_memory_mock';
@NgModule({
 imports: [
  InMemoryWebApiModule.forRoot(UserDataMemoryMock),
 ]
})

导入InMemoryWebApiModule并将其加入到模块的imports数组。 InMemoryWebApiModule将Http客户端模拟的后端服务
forRoot()配置方法需要UserMemoryMockService类实例,用来向内存数据库填充数据

编辑app/service/user.restful.service.ts

import {Injectable} from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { User } from '../model/User';
import { Logger } from './logger.service';
@Injectable()
export class UserService {
  private USERURL = 'api/users';
  private headers = new Headers({'Content-Type': 'application/json'});
  constructor(private Log: Logger,
  private http: Http) { }
  getUserByName(name: string): Promise<User> {
  const url = `${this.USERURL}/?name=${name}`;
  return this.http.get(url)
    .toPromise()
    .then(response => response.json().data as User)
    .catch(this.handleError);
  }
  getUsers(): Promise<User[]> {
    console.log('Get User!');
    return this.http.get(this.USERURL)
    .toPromise()
    .then(response => response.json().data as User[])
    .catch(this.handleError);
  }
  create(name: string): Promise<User> {
  return this.http
    .post(this.USERURL, JSON.stringify({name: name}), {headers: this.headers})
    .toPromise()
    .then(res => res.json().data as User)
    .catch(this.handleError);
  }
  private handleError(error: any): Promise<any>{
    console.log('An error occurred :', error);
    return Promise.reject(error.message);
  }
}

编辑app/components/app-loginform/app.loginform.ts

import { Component, OnInit } from '@angular/core';
import { Logger } from '../../service/logger.service';
import { UserService } from '../../service/user.restful.service';
import { User } from '../../model/User';
import { Subject } from 'rxjs/Subject';
@Component({
 selector: 'app-loginform',
 templateUrl: './app.loginform.html',
 styleUrls: ['./app.loginform.css'],
 providers: [
  Logger,
  UserService
 ]
})
export class AppLoginFormComponent implements OnInit {
  users: User[];
  submitted = false;
  model = new User('1', 'fangfang', 22, '2290910211@qq.com', '123456');
  constructor(
    private Log: Logger,
    private userService: UserService
  ){}
  ngOnInit(): void{
    this.userService
    .getUsers()
    .then( users => this.users = users);
  }
  onSubmit(): void {
    this.userService.getUserByName(this.model.name)
    .then( user => {
      console.log('user.name', user[0].name);
      console.log('user.password', user[0].password);
      if(user[0].name === this.model.name
      && user[0].password === this.model.password){
        this.Log.log('login success!');
        this.submitted = true;
      }else{
        this.Log.log('login failed!');
        this.submitted = false;
      }
    })
    .catch(errorMsg => console.log(errorMsg));
  }
}

HTTP Promise

Angular 的http.get返回一个 RxJS 的Observable对象。 Observable是一个管理异步数据流的强力方式。

现在,我们先利用toPromise方法把Observable直接转换成Promise对象

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

希望本文所述对大家AngularJS程序设计有所帮助。

相关文章

  • 理解Angular数据双向绑定

    理解Angular数据双向绑定

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。这篇文章主要带着大家理解Angular数据双向绑定,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • AngularJS中下拉框的高级用法示例

    AngularJS中下拉框的高级用法示例

    这篇文章主要介绍了AngularJS中下拉框的高级用法,结合实例形式分析了AngularJS下拉框的遍历、选择、绑定、显示等功能实现方法,需要的朋友可以参考下
    2017-10-10
  • 详解angularJs中关于ng-class的三种使用方式说明

    详解angularJs中关于ng-class的三种使用方式说明

    本篇文章主要介绍了angularJs中关于ng-class的三种使用方式说明,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • AngularJS入门教程之表格实例详解

    AngularJS入门教程之表格实例详解

    本文主要介绍AngularJS 表格,这里给大家整理了相关知识,并附代码实例,有需要的小伙伴可以参考下
    2016-07-07
  • Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例

    Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示

    这篇文章主要介绍了Angular使用过滤器uppercase/lowercase实现字母大小写转换功能,涉及AngularJS过滤器针对字符串转换的简单使用技巧,需要的朋友可以参考下
    2018-03-03
  • angular2路由切换改变页面title的示例代码

    angular2路由切换改变页面title的示例代码

    本篇文章主要介绍了angular2路由切换改变页面title的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 使用yeoman构建angular应用的方法

    使用yeoman构建angular应用的方法

    下面小编就为大家带来一篇使用yeoman构建angular应用的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • angular ng-click防止重复提交实例

    angular ng-click防止重复提交实例

    本篇文章主要介绍了angular ng-click防止重复提交实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 详解AngularJs ui-router 路由的简单介绍

    详解AngularJs ui-router 路由的简单介绍

    本篇文章主要介绍了AngularJs ui-router 路由的简单介绍。简单明了的说明了ngRoute和ui-router的区别和用法,有兴趣的可以了解一下
    2017-04-04
  • Angular ng-animate和ng-cookies用法详解

    Angular ng-animate和ng-cookies用法详解

    本文讲一下Angular中动画应用的部分。这篇文章主要介绍了Angular ng-animate和ng-cookies用法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论