У меня есть Back-End API, который возвращает данные в следующей структуре:
{
"code": 200,
"message": "Success",
"data": // Can basically be anything.. object, array, string, etc...
}
Дело в том, что я действительно озадачен тем, как все это должно работать с такой вложенной полезной нагрузкой.
Хотелось бы получить еще немного советов о том, как реализовать эту мерзость в моем шаблоне проектирования и как сделать это правильно.
В моем арсенале есть следующее оружие:
APIResponse - Модель
export default interface APIResponse {
code: number;
message: string;
data?: any;
}
NetworkService - Сервис
@Injectable({ providedIn: 'root' })
export class NetworkService {
constructor(private http: HttpClient) { }
private _formatErrors(error: any) {
return throwError(error);
}
get(environment: string, path: string, params: HttpParams = new HttpParams()): Observable<APIResponse> {
return this.http.get<APIResponse>(`${environment}${path}`, { params }).pipe(catchError(this._formatErrors));
}
}
PostsAPI
Я застрял именно здесь. Как преобразовать атрибут APIResponse
data
в Post[]
Наблюдаемый?
@Injectable({ providedIn: 'root' })
export class PostsAPI {
// Lifecycle
constructor(private _network: NetworkService) { }
// API Methods
getAllPosts(page: number = 1, limit: number = 10): Observable<Post[]> {
return this._network.get(GlobalAPI.baseURL, `${GlobalAPI.endpoints.posts.base}?page=${page}&limit=${limit}`); // Obviously I have a type mismatch here and I'm doing it all wrong.
}
}
PostsFacade
@Injectable({ providedIn: 'root' })
export class PostsFacade {
posts$: Observable<Post[]>;
// Lifecycle
constructor(private _postsAPI: PostsAPI) {
this._postsAPI.getAllPosts().subscribe(response => this.posts$ = response.data.posts); // Obviously I have a type mismatch here and I'm doing it all wrong.
}
}
HomeComponent - страница, на которой отображаются сообщения
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
posts$ = this._postsFacade.posts$;
// Lifecycle
constructor(private _postsFacade: PostsFacade) { }
ngOnInit() {
console.log(this.posts$); // Returns undefined
}
}
Большое спасибо!