Dieser Artikel stellt hauptsächlich das Prinzip und die Verwendung von HTTP-Anfragen in Angular2 vor und analysiert die http-bezogenen Module in AngularJS, um http-Service-Anfragen und entsprechende verwandte Betriebstechniken in Form von Beispielen zu implementieren
Die Beispiele in diesem Artikel beschreiben die Prinzipien und die Verwendung von HTTP-Anfragen in Angular2. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
HTTP-Dienst bereitstellen
HttpModule ist nicht verfügbar ein Kernmodul von Angular . Es handelt sich um eine optionale Methode, die von Angular für den Webzugriff verwendet wird und sich in einem separaten Satellitenmodul mit dem Namen @angular/http
Edit app.module.ts
import { HttpModule, JsonpModule } from '@angular/http';
@NgModule({
imports: [
HttpModule,
JsonpModule
],
})Nach dem Login kopieren
befindet angle-in-memory-web-api
npm install angular-in-memory-web-api --save-dev
Nach dem Login kopieren
Dieser In-Memory-Web-API-Dienst verarbeitet eine HTTP-Anfrage und gibt ein Observable of HTTP Response-Objekt in der Art einer RESTy-Web-API zurück.
: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"
Nach dem Login kopieren
Die app/mock/user_data_memory_mock.ts-Daten, die in früheren Tests verwendet wurden
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};
}
}Nach dem Login kopieren
app.module.ts bearbeiten
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { UserDataMemoryMock } from './mock/user_data_memory_mock';
@NgModule({
imports: [
InMemoryWebApiModule.forRoot(UserDataMemoryMock),
]
})Nach dem Login kopieren
InMemoryWebApiModule importieren und hinzufügen es in das Import-Array des Moduls ein. InMemoryWebApiModule simuliert den Back-End-Dienst des HTTP-Clients
Die Konfigurationsmethode erfordert eine UserMemoryMockService-Klasseninstanz, um Daten in die Speicherdatenbank zu füllen forRoot()
App/service/user.restful.service bearbeiten . 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);
}
}Nach dem Login kopieren
Bearbeiten 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));
}
}Nach dem Login kopieren
HTTP-Versprechen
Angulars http.get gibt ein RxJS Observable-Objekt zurück. Observable ist eine leistungsstarke Möglichkeit, asynchrone Datenströme zu verwalten.
Nun verwenden wir die toPromise-Methode, um das Observable direkt in ein Promise-Objekt umzuwandeln.
Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
JavaScript rekursive Traversierung und nicht-rekursive Traversierung
VUE persönliche Zusammenfassung (aufgetretene Probleme)
Nuxt.js Vue serverseitige Rendering-Erkundung
Was sind die Unterschiede zwischen let- und var-definierten Variablen in js?
Probleme in Vue, weil die Uhr Änderungen in Objekteigenschaften nicht erkennt
Das obige ist der detaillierte Inhalt vonInformationen zum HTTP-Anforderungsprinzip in Angular2 (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
