Angular извлекать данные из серверной части в отдельном потоке - PullRequest
Новая
       10

Angular извлекать данные из серверной части в отдельном потоке

0 голосов
/ 25 марта 2020

Вот сценарий: На двух страницах: домашняя страница и страница данных списка. Чтобы улучшить взаимодействие с пользователем, на домашней странице, когда пользователь нажимает кнопку, мне нужно запустить отдельную ветку, в которой я получаю данные ( данные для страницы данных списка) из restful api, когда данные выбираются, я хочу показать пользователю уведомление о том, что данные готовы, и он может go отобразить страницу данных. Из-за большого объема данных нецелесообразно перенаправлять пользователя на страницу списка данных и ждать, пока данные будут извлечены из серверной части. Я использую angular fir front-end и springboot для back-end. Примечание: я реализовал решение, используя функции asyn c. Но мне нужно решение для описанного сценария.

1 Ответ

0 голосов
/ 25 марта 2020

В Angular и вообще в JavaScript не думайте с точки зрения потоков.

То, что вы описываете, может быть достигнуто с помощью службы Angular и некоторых Обещаний:

  1. Создайте Angular Сервис MyService, который будет использовать HttpClient для предоставления метода getMyData. Внутри этого метода используйте HttpClient.doGet, чтобы получить нужные данные. Как только данные извлечены, кэшируйте их в этом сервисе. Также верните Обещание, чтобы инициатор знал, когда данные будут готовы. Примерно так: 
public getMyData() {
    return this.httpClient.doGet("http://example.com/my-endpoint")
               .toPromise()
               .then(data => this.cachedData = data)
}

public getMyCachedData() {
    return this.cachedData;
}
В вашем компоненте HomePage вызовите MyService.getMyData и используйте метод then возвращенного Обещания, чтобы установить флаг isDataReady в true. Примерно так: 
ngOnInit() {
    this.myService.getMyData()
                  .then(data => this.isDataReady = true)
}
В шаблоне HomePage, когда для isDataReady установлено значение true, отображается сообщение, сообщающее пользователю, что данные готовы. Это сообщение должно содержать ссылку на ListPage: 
    <a *ngIf="isDataReady" routerLink="/list-page">Data is ready</a>
В ListPage извлеките кэшированные данные из службы: 
ngOnInit() {
    this.myService.getMyCachedData()
                  .then(data => /* do something with your data */)
}

Дополнительные сведения об использовании службы для взаимодействия компонентов содержатся в Angular Guide .

...