angular - 如何从 HAL 响应中获取我的资源数据?
问题描述
我正在使用 Spring Boot 2 构建一个 API,而 Angular 6 客户端必须处理如下响应:
{
"_embedded" : {
"userResourceList" : [ {
"firstname" : "Stephane",
"lastname" : "Toto",
"email" : "toto@yahoo.se",
"confirmedEmail" : false,
"password" : "bWl0dGlwcm92ZW5jZUB5YWhvby5zZTptaWduZXRjNWRlMDJkZS1iMzIwLTQ4Y2YtOGYyMS0wMmFkZTQ=",
"userRoles" : [ {
"role" : "ROLE_ADMIN",
"id" : 1
} ],
"_links" : {
"self" : {
"href" : "http://localhost:8080/api/users/1"
},
"roles" : {
"href" : "http://localhost:8080/api/users/1/roles"
}
},
"id" : 1
} ]
},
"_links" : {
"self" : {
"href" : "http://localhost:8080/api/users"
}
},
"page" : {
"size" : 20,
"totalElements" : 1,
"totalPages" : 1,
"number" : 0
}
}
所有 REST 资源端点都会重新运行此类 HALified 响应。
我想知道如何处理这些。如果有这样的库可以简化实际有效负载的解析和提取。
我听说过RestAngular库,但我不太确定它是否是我想要的。
也许一些侵入性较小的东西仅有助于解析,例如:
const user: User = hal2Json.parse<User>(response);
更新:我没有找到任何这样的库,所以我求助于这个实现:
public getSome(searchTerm: string, sortFieldName: string, sortDirection: string, currentPage: number, limit: number): Observable<any> {
let httpParams = new HttpParams()
.set('page', currentPage.toString())
.set('size', limit.toString());
if (searchTerm) {
httpParams = httpParams.append('searchTerm', searchTerm);
}
if (sortFieldName && sortDirection) {
httpParams = httpParams.append('sort', sortFieldName + ',' + sortDirection);
}
return this.httpService.get(this.usersUrl, httpParams);
}
export class UsersApi extends PaginationApi {
constructor(users: User[], currentPageNumber: number, elementsPerPage: number, totalElements: number, totalPages: number) {
super(currentPageNumber, elementsPerPage, totalElements, totalPages);
this.users = users;
}
users: User[];
}
getUsers(searchTerm: string, sortFieldName: string, sortDirection: string, currentPageNumber: number): Observable<UsersApi> {
return this.userService.getSome(searchTerm, sortFieldName, sortDirection, currentPageNumber, this.elementsPerPage)
.pipe(
map(response => {
return new UsersApi(
response._embedded.userResourceList as User[],
this.paginationService.correctPageNumberMispatch(response.page.number),
response.page.size,
response.page.totalElements,
response.page.totalPages
);
})
);
}
解决方案
定义一个接口来包装 HAL 响应。这就是我为图书服务所做的:
// book.service.ts
import { Injectable } from '@angular/core';
import { Book } from '../book';
import { Observable, map } from 'rxjs';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class BookService {
private booksUrl = 'http://localhost:8080/books';
constructor(private http: HttpClient) { }
getBooks(): Observable<Book[]> {
return this.http.get<GetBooksResponse>(this.booksUrl).pipe(
map(response => response._embedded.bookList)
);
}
}
interface GetBooksResponse {
_embedded: {
bookList: Book[];
_links: {self: {href: string}};
};
}
归功于这篇文章:https://medium.com/@tbrouwer/spring-boot-backend-for-angular-tour-of-heroes-106dc33a739b
推荐阅读
- webpack - 如果您正在运行服务器,如何使用捆绑器?
- tensorflow - 为什么 Tensor Flow 会为我的输入和输出添加维度?
- java - Flutter 开发 - 错误:未设置 JAVA_HOME,在您的 PATH 中找不到“java”命令
- java - Xml验证错误Eclipse Crash Deployment of App
- reactjs - 如何键入 html 选择元素,以便 event.target.value 引用选项值类型?
- spring - 如何检查redis中每个缓存值的缓存命中率?
- java - 如何使用 Java Scanner 读取数字和句子
- c++ - 在使用头文件中的结构时链接两个 cpp 文件
- c++ - QT 事件过滤器不适用于多个按钮
- reactjs - GraphQL 无法为不可为空的字段 User.createdAt 返回 null