在 http get 和 post 的角度 5.2.x 中，我有以下代码：
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帖子或获取请求？
更新 ： 在角度 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/操作员：所有管道操作员：
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
您可以使用库进行发布/获取，该库允许您将HttpClient与强类型回调一起使用。
数据和错误可通过这些回调直接获得。
该库称为angular-extended-http-client。
GitHub 上的 angular-extended-http-client 库
NPM 上的 angular-extended-http-client 库
非常易于使用。
传统方法
在传统方法中，从服务 API 返回可观察<HttpResponse<T=">=">。这与HttpResponse有关。
使用这种方法，您必须在其余代码中使用.subscribe(x => ...(。
这会在http 层和代码的其余部分之间创建紧密耦合。
强类型回调方法
您只在这些强类型回调中处理您的模型。
因此，其余代码只知道您的模型。
示例用法
强类型回调是
成功：
-
IO可保护<
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);
}
}
您的组件
在您的组件中，您的服务被注入，并调用搜索种族信息API，如下所示。
search() {
this.service.searchRaceInfo(this.searchModel, response => this.result = response.result,
error => this.errorMsg = error.className);
}
回调中返回的响应和错误都是强类型的。例如。响应类型为RacingResponse，错误为APIException。
要在 Angular 中读取完整响应，您应该添加观察选项：
{ observe: 'response' }
return this.http.get(`${environment.serverUrl}/api/posts/${postId}/comments/?page=${page}&size=${size}`, { observe: 'response' });