ANGULAR 2: УДАЛЕНИЕ HTTP С ИСПОЛЬЗОВАНИЕМ OBSERVABLE В ПРИЛОЖЕНИИ ANGULAR 2

Клиент Angular Http взаимодействует с сервером, используя знакомый протокол запроса/ответа HTTP. Клиент Http является одним из семейства сервисов в библиотеке Angular HTTP. При импорте из модуля @angular/http SystemJS знает, как загружать сервисы из HTTP-библиотеки Angular, поскольку файл systemjs.config.js сопоставляется с именем этого модуля. HttpModule необходим для выполнения HTTP-вызовов.

Наблюдаемый

Думайте об Observable как о потоке событий, опубликованном каким-то источником. Чтобы прослушивать события в этом потоке, подпишитесь на Observable.

  • Обратный вызов карты наблюдаемого перемещается к параметру успеха, а обратный вызов catch — к параметру отказа в этом шаблоне.
  • Обработчик ошибок пересылает сообщение об ошибке как невыполненное обещание, а не наблюдаемое.

Наблюдаемые и обещания

Менее очевидное, но важное отличие заключается в том, что эти два метода возвращают очень разные результаты.

  • Затем на основе промисов возвращается другое обещание. Вы можете продолжать цепочку и ловить звонки, каждый раз получая новое обещание.
  • Метод подписки возвращает подписку. Подписка не является еще одним Observable. Это конец строки для наблюдаемых. Вы не можете использовать карту вызовов на нем или подписаться на вызов снова. Объект Subscription имеет другую цель, обозначенную его основным методом, отказом от подписки.

RxJS-библиотека

  • RxJS («Reactive Extensions») — это сторонняя библиотека, одобренная Angular, которая реализует асинхронный наблюдаемый шаблон.
  • Пакет RxJS npm загружается через system.js, потому что observables широко используются в приложениях Angular.
  • Это необходимо приложению при работе с HTTP-клиентом. Кроме того, вы должны сделать важный дополнительный шаг, чтобы сделать наблюдаемые объекты RxJS пригодными для использования.
  • Библиотека RxJS большая. Размер имеет значение при создании рабочего приложения и его развертывании на мобильных устройствах. Вы должны включать только необходимые функции.
  • Соответственно, Angular предоставляет урезанную версию Observable в модуле rxjs/Observable, в котором отсутствует большинство операторов, таких как метод карты.
  • Вы можете добавить каждый оператор RxJS с помощью одного оператора импорта. Хотя это проще всего сделать, вы заплатите штраф за увеличенное время запуска и размер приложения, потому что полная библиотека очень велика.
  • Поскольку в этом приложении используется всего несколько операторов, лучше импортировать каждый оператор Observable и метод статического класса один за другим для пользовательской реализации Observable, точно настроенной в соответствии с требованиями приложения. Поместите операторы импорта в один файл app/rxjs-operators.ts.

Метод Http.delete принимает объект, реализующий RequestOptionsArgs, в качестве второго параметра.

Поле поиска этого объекта можно использовать для установки строки или объекта URLSearchParams.

HTTP DELETE с использованием Observable с идентификатором в качестве параметра

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } 
from '@angular/http';
import { Observable } from 'rxjs/Observable';

// Observable class extensions
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';

// Observable operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';

@Injectable()
export class WebApiObservableService {
    headers: Headers;
    options: RequestOptions;

    constructor(private http: Http) {
        this.headers = new Headers({ 'Content-Type': 'application/json', 
                                     'Accept': 'q=0.8;application/json;q=0.9' });
        this.options = new RequestOptions({ headers: this.headers });
    }

    deleteServiceWithId(url: string, key: string, val: string): Observable {
    return this.http
        .delete(url + "/?" + key + "=" + val, this.options)
        .map(this.extractData)
        .catch(this.handleError);
    }     

    private extractData(res: Response) {
        let body = res.json();
        return body || {};
    }

    private handleError(error: any) {
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg);
        return Observable.throw(errMsg);
    }
}