Chvalov
@Chvalov

Как дожидаться ответа от сервиса Angular?

Есть ApiService через который выполняются запросы к back-у
api.service.ts
const BASE_URL  = 'http://127.0.0.1:8080/api/';
const VERSION   = 'v1';

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type':  'application/json',
};

@Injectable()
export class ApiService {
    readonly rootUrl = BASE_URL + VERSION + '/';

    constructor(private httpClient: HttpClient) { }

    // GET
    public get(path: string): Observable<any> {
        return this.httpClient
            .get(this.rootUrl + path, httpOptions)
            .pipe(catchError(this.formatErrors));
    }
}
Модель проектов:
project.model.ts
import {Request} from "./request.model";

export interface PageProject {
    content: Project[];
    totalPages: number;
    totalElements: number;
    last: boolean;
    size: number;
    first: boolean;
    sort: string;
    numberOfElements: number;
}

export interface Project {
    id: number;
    name: string;
    description: string;
    created: string;
    updated: string;
    requests: Request[];
}
Сервис который обрабатывает запросы к проектам:
project.service.ts
const routes = {
    projects: 'projects',
    project: (id: number) =>  `projects/${id}`
};

@Injectable()
export class ProjectService {
    constructor(private apiService: ApiService) { }

    public getAll(): Observable<PageProject>  {
        return this.apiService.get(routes.projects);
    }
}
И компонент в котором я должен получить данные с сервиса:
project-list.component.ts
export class ProjectListComponent implements OnInit {

    constructor(private projectService: ProjectService) { }
    test: PageProject;

    ngOnInit(): void {
        this.projectService.getAll().subscribe(data => this.test = data);
        console.log(this.test);
    }

И вот в чем проблема, в Инструментах разработчика я вижу что запрос к back-у выполнен, но переменная test -> undefined
Создал метод который вызывается при клике по кнопке
getTestLog(): void {
        console.log(this.test);
    }
при вызове данного метода уже есть данные в переменной, как выяснилось console.log() выполняется сразу после
this.projectService.getAll().subscribe(data => this.test = data);
не дожидаясь ответа.
Как исправить ?
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
@JokerS_Smile
Лямбда из subscribe выполнится после того как придет ответ, в эту лямбда можно и вынести console.log, чтобы посмотреть что пришло в ответе
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
https://www.udemy.com/the-complete-guide-to-angular-2/
Тут хорошо рассказывают и азы и работу с RxJS и даже NgRx цепляют напоследок. Для старта хватит, а дальше только от вас зависит.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы