Detailed explanation of Http request principles and usage in angular2 and angular2

Detailed explanation of Http request principles and usage in angular2 and angular2

This document describes the principles and usage of Http requests in angular2. We will share this with you for your reference. The details are as follows:

Provide HTTP Services

HttpModule is not the core module of Angular. Angular is an optional method for Web access.@angular/http.

Edit 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 heroesGET api/heroes/42    // the character with id=42GET 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 data used in previous tests

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}; }}

Edit app. module. ts

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

Import InMemoryWebApiModule and add it to the imports array of the module. InMemoryWebApiModule uses the backend service simulated by the Http client
forRoot()The configuration method requires a UserMemoryMockService instance to populate the data with the memory database.

Edit 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);  }}

Edit 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 returns an RxJS Observable object. Observable is a powerful method for managing asynchronous data streams.

Now, we use the toPromise method to directly convert the Observable into a Promise object.