Http post 并在 angular 中获取请求 6

Question

在 angular 5.2.x 中获取 http 和 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 post 或获取请求？

Answer 1

更新：在angular7中，与6

相同

在angular6

在 live example

中找到的完整答案

  /** 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 socket主题实现

import { webSocket } from 'rxjs/webSocket';

rxjs/ajax：Rx ajax 实现

import { ajax } from 'rxjs/ajax';

rxjs/testing：测试实用程序

import { TestScheduler } from 'rxjs/testing';

为了向后兼容，您可以使用 rxjs-compat

Answer 2

您可以 post/get 使用允许您 将 HttpClient 与强类型回调一起使用的库 。

数据和错误可直接通过这些回调获得。

库名为 angular-extended-http-client.

angular-extended-http-client library on GitHub

angular-extended-http-client library on NPM

非常容易使用。

传统方法

在传统方法中，您 return Observable<HttpResponse<T>> 来自服务 API。这与 HttpResponse 相关。

使用这种方法，您必须在其余代码中使用 .subscribe(x => ...)。

这会在 http 层 和 其余代码 之间创建 紧密耦合 .

强类型回调方法

您只在这些强类型回调中处理您的模型。

因此，您的其余代码只知道您的模型。

示例用法

强类型回调是

成功：

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 return 都是强类型的。例如。 response 是类型 RacingResponse 并且 error 是 APIException.

Answer 3

要阅读 Angular 中的完整回复，您应该添加观察选项：

{ observe: 'response' }

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

Http post 并在 angular 中获取请求 6

Http post and get request in angular 6

httprequest

observable

angular6