web-dev-qa-db-ja.com

angular 6のHTTPポストおよびリクエストの取得

angular 5.2.x for http get and postでは、このコードがありました：

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

angular 6では機能しません。

HTTPポストを作成したり、リクエストを取得するにはどうすればよいですか？

httprequestobservableangular6
25
unos baghaii

更新：angular 7では、6と同じです

angular 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

MIGRATION の詳細

およびインポートパス

JavaScript開発者の一般的なルールは次のとおりです。

rxjs：作成方法、タイプ、スケジューラー、ユーティリティ

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

rxjs/operators：すべてのパイプ可能な演算子：

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

rxjs/webSocket：Webソケットサブジェクトの実装

import { webSocket } from 'rxjs/webSocket';

rxjs/ajax：Rx ajax実装

import { ajax } from 'rxjs/ajax';

rxjs/testing：テストユーティリティ

import { TestScheduler } from 'rxjs/testing';

下位互換性のために、rxjs-compatを使用できます

34
unos baghaii

ライブラリを使用してpost/getを実行すると、強く型付けされたコールバックでHttpClientを使用が可能になります。

データとエラーは、これらのコールバックを介して直接利用できます。

ライブラリはangular-extended-http-clientと呼ばれます。

GitHub上のangular-extended-http-clientライブラリ

NPMのangular-extended-http-clientライブラリ

とても使いやすい。

従来のアプローチ

従来のアプローチでは、サービスAPIからObservable <HttpResponse<T>>を返します。これはHttpResponseに関連付けられています。

このアプローチでは、残りのコードで。subscribe（x => ...）を使用する必要があります。

これにより、http layerとコードの残りの間に密結合が作成されます。

厳密に型指定されたコールバックアプローチ

これらの厳密に型指定されたコールバックでのみモデルを処理します。

したがって、残りのコードはモデルのみを認識します。

サンプル使用法

強く型付けされたコールバックは

成功：

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

失敗：

  • IObservableError <TError>
  • IObservableHttpError
  • IObservableHttpCustomError <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;
}

あなたのサービス

サービスでは、これらのコールバックタイプでパラメーターを作成するだけです。

次に、それらをHttpClientExtのgetメソッドに渡します。

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

あなたのコンポーネント

コンポーネントにサービスが挿入され、以下に示すようにsearchRaceInfo APIが呼び出されます。

  search() {    


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

  }

コールバックで返されるresponseとerrorの両方が厳密に型指定されています。例えば。 responseはタイプRacingResponseおよびerrorはAPIExceptionです。

2
Shane

Angularで完全な応答を読み取るには、observeオプションを追加する必要があります。

{ observe: 'response' }

    return this.http.get(`${environment.serverUrl}/api/posts/${postId}/comments/?page=${page}&size=${size}`, { observe: 'response' });
0
Stefan Morcodeanu