À propos du principe de requête HTTP dans Angular2 (tutoriel détaillé)

Cet article présente principalement le principe et l'utilisation des requêtes HTTP dans Angular2, et analyse les modules liés à http dans AngularJS pour implémenter les requêtes de service http et les techniques de fonctionnement associées correspondantes sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

Les exemples de cet article décrivent les principes et l'utilisation des requêtes HTTP dans Angular2. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Fournir un service HTTP

HttpModule n'est pas un module de base d'Angular . Il s'agit d'une méthode facultative utilisée par Angular pour l'accès au Web et se trouve dans un module satellite distinct nommé @angular/http

Modifier app.module.ts

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

<.>angular-in-memory-web-api

Ce service d'API Web en mémoire traite une requête HTTP et renvoie un objet Observable de réponse HTTP à la manière d'un API Web RESTy.

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

Les données app/mock/user_data_memory_mock.ts utilisées lors des tests précédents

: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"

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

Modifier app.module.ts

Importez InMemoryWebApiModule et ajoutez-le au tableau d'importation du module. InMemoryWebApiModule simule le service back-end du client Http

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

La méthode de configuration nécessite une instance de la classe UserMemoryMockService pour remplir les données dans la base de données mémoire
forRoot()

Modifier l'application/le service/l'utilisateur. 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(&#39;Get User!&#39;);
    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(&#39;An error occurred :&#39;, error);
    return Promise.reject(error.message);
  }
}

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

Promesse HTTP Le http.get d'Angular renvoie un objet observable RxJS. Observable est un moyen puissant de gérer les flux de données asynchrones.

Maintenant, utilisons la méthode toPromise pour convertir directement l'Observable en un objet Promise

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Parcours récursif JavaScript et parcours non récursif

Résumé personnel VUE (problèmes rencontrés)

Exploration du rendu côté serveur Nuxt.js Vue

Quelles sont les différences entre les variables définies let et var dans js ?

Dans vue, il y a un problème qui fait que la montre ne peut pas détecter les changements dans les attributs des objets

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!