Http пост и получить запрос в угловых 6 - PullRequest
Новая
       20

Http пост и получить запрос в угловых 6

0 голосов
/ 06 мая 2018

В угловой версии 5.2.x для http получить и опубликовать у меня был этот код: 

post(url: string, model: any): Observable<boolean> {

return this.http.post(url, model)
  .map(response => response)
  .do(data => console.log(url + ': ' + JSON.stringify(data)))
  .catch(err => this.handleError(err));
 }
 get(url: string): Observable<any> {

return this.http.get(url)
  .map(response => response)
  .do(data =>
    console.log(url + ': ' + JSON.stringify(data))
  )
  .catch((error: any) => Observable.throw(this.handleError(error)));
 }

В угловых 6 это не работает.

Как сделать HTTP-пост или получить запрос?

Ответы [ 3 ]

0 голосов
/ 21 февраля 2019

Вы можете сделать post / get , используя библиотеку, которая позволяет использовать HttpClient со строго типизированными обратными вызовами .

Данные и ошибка доступны непосредственно через эти обратные вызовы.

Библиотека называется angular-extended-http-client .

угловая расширенная-http-клиентская библиотека на GitHub

библиотека angular-extended-http-client в NPM

Очень прост в использовании.

Традиционный подход

В традиционном подходе вы возвращаете Observable <<code>HttpResponse< T >> из Service API. Это связано с HttpResponse.

При таком подходе вы должны использовать .subscribe (x => ...) в остальной части вашего кода.

Это создает жесткую связь между http layer и остальной частью вашего кода .

Строго типизированный метод обратного вызова

Вы имеете дело с вашими моделями только с помощью строго типизированных обратных вызовов.

Следовательно, остальная часть вашего кода знает только о ваших моделях.

Пример использования

Сильно типизированные обратные вызовы:

Успех

  • IObservable <<code>T>
  • IObservableHttpResponse
  • IObservableHttpCustomResponse <<code>T>

Ошибка:

  • IObservableError <<code>TError>
  • IObservableHttpError
  • IObservableHttpCustomError <<code>TError>

Добавить пакет в свой проект и в модуль приложения 

import { HttpClientExtModule } from 'angular-extended-http-client';

и в импорте @NgModule 

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

Ваши модели 


export class SearchModel {
    code: string;
}

//Normal response returned by the API.
export class RacingResponse {
    result: RacingItem[];
}

//Custom exception thrown by the API.
export class APIException {
    className: string;
}

Ваш сервис

В вашей службе вы просто создаете параметры с этими типами обратного вызова.

Затем передайте их в метод get HttpClientExt . 

import { Injectable, Inject } from '@angular/core'
import { SearchModel, RacingResponse, APIException } from '../models/models'
import { HttpClientExt, IObservable, IObservableError, ResponseType, ErrorType } from 'angular-extended-http-client';
.
.

@Injectable()
export class RacingService {

    //Inject HttpClientExt component.
    constructor(private client: HttpClientExt, @Inject(APP_CONFIG) private config: AppConfig) {

    }

    //Declare params of type IObservable<T> and IObservableError<TError>.
    //These are the success and failure callbacks.
    //The success callback will return the response objects returned by the underlying HttpClient call.
    //The failure callback will return the error objects returned by the underlying HttpClient call.
    searchRaceInfo(model: SearchModel, success: IObservable<RacingResponse>, failure?: IObservableError<APIException>) {
        let url = this.config.apiEndpoint;

        this.client.post<SearchModel, RacingResponse>(url, model, 
                                                      ResponseType.IObservable, success, 
                                                      ErrorType.IObservableError, failure);
    }
}

Ваш компонент

В ваш Компонент добавляется ваша Служба и вызывается API searchRaceInfo , как показано ниже. 

  search() {    


    this.service.searchRaceInfo(this.searchModel, response => this.result = response.result,
                                                  error => this.errorMsg = error.className);

  }

Оба, ответ и ошибка , возвращаемые в обратных вызовах, строго типизированы. Например. ответ имеет тип RacingResponse и ошибка равна APIException .

0 голосов
/ 27 июня 2019

Для чтения полного ответа в Angular необходимо добавить опцию наблюдения: 

{ observe: 'response' }

    return this.http.get(`${environment.serverUrl}/api/posts/${postId}/comments/?page=${page}&size=${size}`, { observe: 'response' });
0 голосов
/ 06 мая 2018

Обновление: В угловых 7 они такие же как 6

В угловых 6

полный ответ найден в живом примере 

  /** POST: add a new hero to the database */
  addHero (hero: Hero): Observable<Hero> {
 return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
  .pipe(
    catchError(this.handleError('addHero', hero))
  );
}
  /** GET heroes from the server */
 getHeroes (): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
  .pipe(
    catchError(this.handleError('getHeroes', []))
  );
}

это из-за pipeable/lettable operators, который теперь angular может использовать tree-shakable и удалять неиспользуемый импорт и оптимизировать приложение

изменены некоторые функции rxjs 

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize

больше в МИГРАЦИЯ

и пути импорта

Для разработчиков JavaScript общее правило таково:

rxjs: методы создания, типы, планировщики и утилиты 

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

rxjs / operator: Все операторы передачи: 

import { map, filter, scan } from 'rxjs/operators';

rxjs / webSocket: реализация темы веб-сокета 

import { webSocket } from 'rxjs/webSocket';

rxjs / ajax: реализация Rx ajax 

import { ajax } from 'rxjs/ajax';

rxjs / testing: утилиты тестирования 

import { TestScheduler } from 'rxjs/testing';

и для обратной совместимости вы можете использовать rxjs-compat

...