Как повторно вызвать HTTP-вызов при изменении параметра?

Question

У меня есть сервисный метод, который запускает HTTP-вызов с параметрами, переданными ему. Работает, проблем нет.

Что мне нужно сделать, так это чтобы мой компонент повторно вызвал этот вызов при изменении этих параметров. Я все еще сталкиваюсь с наблюдаемыми и RxJS в целом, поэтому я не уверен, как это сделать. У меня есть параметры, настроенные как Subject, с новым объектом этих параметров, отправляемым ему при каждом изменении. Итак, если я подпишусь на параметры Subject, как мне лучше перезапустить HTTP-вызов? Повторная подписка на каждое изменение кажется чрезвычайно грязной.

Answer 1

Ожидаете ли вы поток ответов от вызова http? Если нет, то может быть чище сделать что-то вроде:

export class MyComponent implements OnInit {
    parametersChange$: Subject;
    httpResult

    ngOnInit () {
       this.parametersChange$.subscribe(async params => {
           this.httpResult = await this.http.get(params).toPromise();
       });
    }
}

Answer 2

Почему бы просто не использовать switchMap()? С ним вам не нужно обрабатывать какие-либо подписки, пока ваш компонент не будет разрушен.

export class MyComponent implements OnInit {
    //remember to inject your service properly
    ngOnInit() {
        this.myService.parametersChange$
            .asObservable()
            .switchMap(params => this.http.get(`/do/something/with/your/{params}`))
            .subscribe(x => console.log(x))//handle your http
    }
}

Answer 3

Я думаю, что вы почти у цели, просто подпишитесь на свою тему, и каждый раз, когда вы получаете от нее новое значение, запускайте Http-вызов.

Также вы правы, так как вам нужно подписаться, чтобы фактически активировать ваш http-вызов, вы будете вынуждены переподписываться каждый раз. Для оптимизации вы можете отслеживать свою подписку на HTTP-вызовы и отписываться от нее каждый раз, когда изменяются ваши параметры, поэтому вы не отслеживаете «старый» запрос.

Примерно так:

export class MyComponent implements OnInit {
    parametersChange$: Subject;
    httpSubscription: Subscription;

    ngOnInit () {
       this.parametersChange$.subscribe(params => {
           if (this.httpSubscription) {
              this.httpSubscription.unsubscribe();
           }
           this.httpSubscription = this.http.get(...).subscribe(// do your stuff);
       });
    }
}

Надеюсь, что поможет