Angular и RxJS: добавление API-интерфейса REST

 public deleteTodoById(todoId: number): Observable<null> { return this.http .delete(API_URL + '/todos/' + todoId) .map(response => null) .catch(this.handleError); } 

Сначала мы выполняем запрос DELETE к нашему API:

 delete(API_URL + '/todos/' + todoId) 

Затем мы преобразовываем ответ в null :

 map(response => null) 

Нам не нужно трансформировать ответ здесь, и мы могли бы пропустить эту строку. Это просто включено, чтобы дать вам представление о том, как вы можете обработать ответ, если ваш API вернет данные при выполнении запроса DELETE.

Вот полный код нашего ApiService :

 import { Injectable } from '@angular/core'; import { environment } from 'environments/environment'; import { Http, Response } from '@angular/http'; import { Todo } from './todo'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; const API_URL = environment.apiUrl; @Injectable() export class ApiService { constructor( private http: Http ) { } public getAllTodos(): Observable<Todo[]> { return this.http .get(API_URL + '/todos') .map(response => { const todos = response.json(); return todos.map((todo) => new Todo(todo)); }) .catch(this.handleError); } public createTodo(todo: Todo): Observable<Todo> { return this.http .post(API_URL + '/todos', todo) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public getTodoById(todoId: number): Observable<Todo> { return this.http .get(API_URL + '/todos/' + todoId) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public updateTodo(todo: Todo): Observable<Todo> { return this.http .put(API_URL + '/todos/' + todo.id, todo) .map(response => { return new Todo(response.json()); }) .catch(this.handleError); } public deleteTodoById(todoId: number): Observable<null> { return this.http .delete(API_URL + '/todos/' + todoId) .map(response => null) .catch(this.handleError); } private handleError (error: Response | any) { console.error('ApiService::handleError', error); return Observable.throw(error); } } 

Теперь, когда у нас есть наш ApiService , мы можем использовать его, чтобы наш TodoDataService с нашей REST API серверной частью.

Обновление TodoDataService

В настоящее время наш TodoDataService хранит все данные в памяти:

 import {Injectable} from '@angular/core'; import {Todo} from './todo'; @Injectable() export class TodoDataService { // Placeholder for last id so we can simulate // automatic incrementing of ids lastId: number = 0; // Placeholder for todos todos: Todo[] = []; constructor() { } // Simulate POST /todos addTodo(todo: Todo): TodoDataService { if (!todo.id) { todo.id = ++this.lastId; } this.todos.push(todo); return this; } // Simulate DELETE /todos/:id deleteTodoById(id: number): TodoDataService { this.todos = this.todos .filter(todo => todo.id !== id); return this; } // Simulate PUT /todos/:id updateTodoById(id: number, values: Object = {}): Todo { let todo = this.getTodoById(id); if (!todo) { return null; } Object.assign(todo, values); return todo; } // Simulate GET /todos getAllTodos(): Todo[] { return this.todos; } // Simulate GET /todos/:id getTodoById(id: number): Todo { return this.todos .filter(todo => todo.id === id) .pop(); } // Toggle todo complete toggleTodoComplete(todo: Todo) { let updatedTodo = this.updateTodoById(todo.id, { complete: !todo.complete }); return updatedTodo; } } 

Чтобы наш TodoDataService взаимодействовать с нашим REST API, мы должны внедрить наш новый ApiService :

 import { Injectable } from '@angular/core'; import { Todo } from './todo'; import { ApiService } from './api.service'; import { Observable } from 'rxjs/Observable'; @Injectable() export class TodoDataService { constructor( private api: ApiService ) { } } 

Мы также обновляем его методы, чтобы делегировать всю работу соответствующим методам в ApiService :

 import { Injectable } from '@angular/core'; import { Todo } from './todo'; import { ApiService } from './api.service'; import { Observable } from 'rxjs/Observable'; @Injectable() export class TodoDataService { constructor( private api: ApiService ) { } // Simulate POST /todos addTodo(todo: Todo): Observable<Todo> { return this.api.createTodo(todo); } // Simulate DELETE /todos/:id deleteTodoById(todoId: number): Observable<Todo> { return this.api.deleteTodoById(todoId); } // Simulate PUT /todos/:id updateTodo(todo: Todo): Observable<Todo> { return this.api.updateTodo(todo); } // Simulate GET /todos getAllTodos(): Observable<Todo[]> { return this.api.getAllTodos(); } // Simulate GET /todos/:id getTodoById(todoId: number): Observable<Todo> { return this.api.getTodoById(todoId); } // Toggle complete toggleTodoComplete(todo: Todo) { todo.complete = !todo.complete; return this.api.updateTodo(todo); } } 

Наши новые реализации методов выглядят намного проще, потому что логика данных теперь обрабатывается серверной частью REST API.

Тем не менее, есть важное отличие. Старые методы содержали синхронный код и сразу возвращали значение. Обновленные методы содержат асинхронный код и возвращают Observable.

Это означает, что мы также должны обновить код, который вызывает методы TodoDataService для правильной обработки Observables.

Обновление AppComponent

В настоящее время AppComponent ожидает, что TodoDataService будет напрямую возвращать объекты и массивы JavaScript:

 import {Component} from '@angular/core'; import {TodoDataService} from './todo-data.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [TodoDataService] }) export class AppComponent { constructor( private todoDataService: TodoDataService ) { } onAddTodo(todo) { this.todoDataService.addTodo(todo); } onToggleTodoComplete(todo) { this.todoDataService.toggleTodoComplete(todo); } onRemoveTodo(todo) { this.todoDataService.deleteTodoById(todo.id); } get todos() { return this.todoDataService.getAllTodos(); } } 

Но наши новые методы ApiService возвращают Observables.

 // AppComponent get todos() { return this.todoDataService.getAllTodos(); } 

 // TodoDataService getAllTodos(): Observable<Todo[]> { return this.api.getAllTodos(); } 

 // ApiService public getAllTodos(): Observable<Todo[]> { return this.http .get(API_URL + '/todos') .map(response => { const todos = response.json(); return todos.map((todo) => new Todo(todo)); }) .catch(this.handleError); } 

 this.todoDataService.getAllTodos() 

 // AppComponent get todos() { return this.todoDataService.getAllTodos(); } 

 import { Component, OnInit } from '@angular/core'; import { TodoDataService } from './todo-data.service'; import { Todo } from './todo'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [TodoDataService] }) export class AppComponent implements OnInit { todos: Todo[] = []; constructor( private todoDataService: TodoDataService ) { } public ngOnInit() { this.todoDataService .getAllTodos() .subscribe( (todos) => { this.todos = todos; } ); } } 

 // previously: // onAddTodo(todo) { // this.todoDataService.addTodo(todo); // } onAddTodo(todo) { this.todoDataService .addTodo(todo) .subscribe( (newTodo) => { this.todos = this.todos.concat(newTodo); } ); } 

 import { Component, OnInit } from '@angular/core'; import { TodoDataService } from './todo-data.service'; import { Todo } from './todo'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [TodoDataService] }) export class AppComponent implements OnInit { todos: Todo[] = []; constructor( private todoDataService: TodoDataService ) { } public ngOnInit() { this.todoDataService .getAllTodos() .subscribe( (todos) => { this.todos = todos; } ); } onAddTodo(todo) { this.todoDataService .addTodo(todo) .subscribe( (newTodo) => { this.todos = this.todos.concat(newTodo); } ); } onToggleTodoComplete(todo) { this.todoDataService .toggleTodoComplete(todo) .subscribe( (updatedTodo) => { todo = updatedTodo; } ); } onRemoveTodo(todo) { this.todoDataService .deleteTodoById(todo.id) .subscribe( (_) => { this.todos = this.todos.filter((t) => t.id !== todo.id); } ); } } 

 npm run json-server 

 ng serve 

 ng test 

 /* tslint:disable:no-unused-variable */ import {TestBed, async, inject} from '@angular/core/testing'; import {Todo} from './todo'; import {TodoDataService} from './todo-data.service'; describe('TodoDataService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [TodoDataService] }); }); it('should ...', inject([TodoDataService], (service: TodoDataService) => { expect(service).toBeTruthy(); })); describe('#getAllTodos()', () => { it('should return an empty array by default', inject([TodoDataService], (service: TodoDataService) => { expect(service.getAllTodos()).toEqual([]); })); it('should return all todos', inject([TodoDataService], (service: TodoDataService) => { let todo1 = new Todo({title: 'Hello 1', complete: false}); let todo2 = new Todo({title: 'Hello 2', complete: true}); service.addTodo(todo1); service.addTodo(todo2); expect(service.getAllTodos()).toEqual([todo1, todo2]); })); }); describe('#save(todo)', () => { it('should automatically assign an incrementing id', inject([TodoDataService], (service: TodoDataService) => { let todo1 = new Todo({title: 'Hello 1', complete: false}); let todo2 = new Todo({title: 'Hello 2', complete: true}); service.addTodo(todo1); service.addTodo(todo2); expect(service.getTodoById(1)).toEqual(todo1); expect(service.getTodoById(2)).toEqual(todo2); })); }); describe('#deleteTodoById(id)', () => { it('should remove todo with the corresponding id', inject([TodoDataService], (service: TodoDataService) => { let todo1 = new Todo({title: 'Hello 1', complete: false}); let todo2 = new Todo({title: 'Hello 2', complete: true}); service.addTodo(todo1); service.addTodo(todo2); expect(service.getAllTodos()).toEqual([todo1, todo2]); service.deleteTodoById(1); expect(service.getAllTodos()).toEqual([todo2]); service.deleteTodoById(2); expect(service.getAllTodos()).toEqual([]); })); it('should not removing anything if todo with corresponding id is not found', inject([TodoDataService], (service: TodoDataService) => { let todo1 = new Todo({title: 'Hello 1', complete: false}); let todo2 = new Todo({title: 'Hello 2', complete: true}); service.addTodo(todo1); service.addTodo(todo2); expect(service.getAllTodos()).toEqual([todo1, todo2]); service.deleteTodoById(3); expect(service.getAllTodos()).toEqual([todo1, todo2]); })); }); describe('#updateTodoById(id, values)', () => { it('should return todo with the corresponding id and updated data', inject([TodoDataService], (service: TodoDataService) => { let todo = new Todo({title: 'Hello 1', complete: false}); service.addTodo(todo); let updatedTodo = service.updateTodoById(1, { title: 'new title' }); expect(updatedTodo.title).toEqual('new title'); })); it('should return null if todo is not found', inject([TodoDataService], (service: TodoDataService) => { let todo = new Todo({title: 'Hello 1', complete: false}); service.addTodo(todo); let updatedTodo = service.updateTodoById(2, { title: 'new title' }); expect(updatedTodo).toEqual(null); })); }); describe('#toggleTodoComplete(todo)', () => { it('should return the updated todo with inverse complete status', inject([TodoDataService], (service: TodoDataService) => { let todo = new Todo({title: 'Hello 1', complete: false}); service.addTodo(todo); let updatedTodo = service.toggleTodoComplete(todo); expect(updatedTodo.complete).toEqual(true); service.toggleTodoComplete(todo); expect(updatedTodo.complete).toEqual(false); })); }); }); 

 /* tslint:disable:no-unused-variable */ import {TestBed, inject} from '@angular/core/testing'; import {TodoDataService} from './todo-data.service'; describe('TodoDataService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [ TodoDataService, ] }); }); it('should ...', inject([TodoDataService], (service: TodoDataService) => { expect(service).toBeTruthy(); })); }); 

 TodoDataService should ... Error: No provider for ApiService! 

 /* tslint:disable:no-unused-variable */ import {TestBed, inject} from '@angular/core/testing'; import {TodoDataService} from './todo-data.service'; import { ApiService } from './api.service'; describe('TodoDataService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [ TodoDataService, ApiService ] }); }); it('should ...', inject([TodoDataService], (service: TodoDataService) => { expect(service).toBeTruthy(); })); }); 

 ng g service ApiMock --spec false 

 installing service create src/app/api-mock.service.ts WARNING Service is generated but not provided, it must be provided to be used 

 import { Injectable } from '@angular/core'; import { Todo } from './todo'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; @Injectable() export class ApiMockService { constructor( ) { } public getAllTodos(): Observable<Todo[]> { return Observable.of([ new Todo({id: 1, title: 'Read article', complete: false}) ]); } public createTodo(todo: Todo): Observable<Todo> { return Observable.of( new Todo({id: 1, title: 'Read article', complete: false}) ); } public getTodoById(todoId: number): Observable<Todo> { return Observable.of( new Todo({id: 1, title: 'Read article', complete: false}) ); } public updateTodo(todo: Todo): Observable<Todo> { return Observable.of( new Todo({id: 1, title: 'Read article', complete: false}) ); } public deleteTodoById(todoId: number): Observable<null> { return null; } } 

 /* tslint:disable:no-unused-variable */ import {TestBed, inject} from '@angular/core/testing'; import {TodoDataService} from './todo-data.service'; import { ApiService } from './api.service'; import { ApiMockService } from './api-mock.service'; describe('TodoDataService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [ TodoDataService, { provide: ApiService, useClass: ApiMockService } ] }); }); it('should ...', inject([TodoDataService], (service: TodoDataService) => { expect(service).toBeTruthy(); })); }); 

 ApiService should ... Error: No provider for Http! AppComponent should create the app Failed: No provider for ApiService! 

 import { TestBed, inject } from '@angular/core/testing'; import { ApiService } from './api.service'; describe('ApiService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [ApiService] }); }); it('should ...', inject([ApiService], (service: ApiService) => { expect(service).toBeTruthy(); })); }); 

 import { TestBed, inject } from '@angular/core/testing'; import { ApiService } from './api.service'; import { BaseRequestOptions, Http, XHRBackend } from '@angular/http'; import { MockBackend } from '@angular/http/testing'; describe('ApiService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [ { provide: Http, useFactory: (backend, options) => { return new Http(backend, options); }, deps: [MockBackend, BaseRequestOptions] }, MockBackend, BaseRequestOptions, ApiService ] }); }); it('should ...', inject([ApiService], (service: ApiService) => { expect(service).toBeTruthy(); })); }); 

 AppComponent should create the app Failed: No provider for ApiService! 

 import { TestBed, async } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { NO_ERRORS_SCHEMA } from '@angular/core'; import { TodoDataService } from './todo-data.service'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ FormsModule ], declarations: [ AppComponent ], providers: [ TodoDataService ], schemas: [ NO_ERRORS_SCHEMA ] }).compileComponents(); })); it('should create the app', async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); }); 

 import { TestBed, async } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { NO_ERRORS_SCHEMA } from '@angular/core'; import { TodoDataService } from './todo-data.service'; import { ApiService } from './api.service'; import { ApiMockService } from './api-mock.service'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ FormsModule ], declarations: [ AppComponent ], providers: [ TodoDataService, { provide: ApiService, useClass: ApiMockService } ], schemas: [ NO_ERRORS_SCHEMA ] }).compileComponents(); })); it('should create the app', async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); }); 

 ng build --aot --environment prod