Дождитесь появления нескольких наблюдаемых в Angular 5

Я новичок в Angular и TypeScript, поэтому вопрос может звучать неправильно. Я использую Visual Studio Code и Angular 5 (ng-version = "5.2.11").

Мне нужно «подождать», пока мой вызов api не закончится, и вернуть результат, не оборачивая все в гигантский «.subscribe». Что у меня есть:

exampleMethod(): SettingsClass {
const myComplexObject: SettingsClass = {
  field1: predefined.field1,
  field2: predefined.field2,
  field3: isComplexCalculationsNecessary ? this.CallApi_1(predefined.paramForField3) : predefined.field3,
};

return myComplexObject;
}

Раньше у меня были все параметры в «предопределенный», но теперь мне нужно запросить один (или несколько) из внешнего источника и немедленно вернуть «myComplexObject» из метода (к какому-то другому вызову api, или другому компоненту, или даже интерфейсу, но я нужно, чтобы этот объект был полностью определен со всеми заданными параметрами). Я мог бы перевернуть свой код «вверх ногами» и поместить все в большой «.subscribe», но я этого не сделаю, потому что в какой-то момент мне понадобится другой параметр для запроса, и все это сломается. Как написать вызов api, чтобы не переписывать весь мой код каждый раз, когда мне нужно добавить новый внешний вызов? Что-то вроде:

CallApi_1(paramForField3: string): Observable<int> {
return this.http.get(`${httpConfig.route}?$apply=filter${paramForField3}/groupby${httpConfig.groupingParam}`);
}

Или, может быть

CallApi_1(paramForField3: string): Observable<int> {
return this.ExternalCallsService.GetParam3Information(paramForField3).subscribe(res => 
.GetParam3Information contains the same http call as above, but I need to do
something to return this result outside, I don't know what);
}

Я ищу короля:

field3: isComplexCalculationsNecessary ? **await** this.CallApi(predefined.paramForField3) : predefined.field3,

В настоящее время я пробую rxjs, у которых есть интересные возможности для работы с Observables, такие как forkJoin, но я не уверен, что полностью смотрю в правильном направлении, возможно, такой трюк невозможен, или мое понимание Observables неправильно и мне нужно перенести сложную логику на бэкэнд? Пожалуйста, порекомендуйте.

Еще раз важно отметить, что простой ".subscribe" - это не то, что я ищу, потому что во всех примерах подписки мы не возвращаем значения, а присваиваем их какой-то глобальной переменной или непосредственно html-элементу, и это НЕ то, что я нужно, мне нужно получить ценность и продолжить работу с ней, как только внешний ресурс вернет ее.

я думаю, что switchmap - это то, что ты хочешь

Rahul Singh 13.09.2018 20:09

хм, описание switchmap выглядит многообещающе, попробую.

user3190541 13.09.2018 20:16
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
2
4 054
3

Ответы 3

Вы можете использовать rxjs/concat, взгляните на этот пример: https://stackblitz.com/edit/angular-functions-in-sequence?file=src%2Fapp%2Fapp.component.ts

Это было бы что-то вроде этого: first, second и так далее - это функции, которые возвращают Observables

let sequence = concat([
      this.first, 
      this.second, 
      this.afterSecond, 
      this.third]);

    sequence.subscribe(currentFunction => {
      currentFunction().subscribe(value => {
        this.values.push(value);
      })
    });

Спасибо за предложение. Я мог ошибаться, но "this.values" выглядит как стандартная глобальная переменная, которая не может быть возвращена, присваивается только в какой-то момент (и если я назначу ее слишком рано, я получу null или undefined, а фактический результат будет Потерянный). Но я приведу пример, который вы привели.

user3190541 13.09.2018 20:12

this.value создается на уровне компонента и обновляется в NgOnInit для этого примера :) реальная реализация будет иметь функцию, которая возвращает Observable типа значений;)

hamilton.lima 13.09.2018 20:37

Вы можете использовать операторы zip или forkjoin (они похожи, но не одинаковы) или вы можете связать свои HTTP-вызовы:

this.http.get1( url1, headers ).subscribe(
   data => {
      this.data1 = data;
      this.http.get2( url2, headers ).subscribe(
         data => {
            this.data2 = data;
         },
         error2{
            // do something on error2
         }
      )
   },
   error1 => {
      // do something on error1
   }
)

Это не очень хорошо, но работает нормально. Я помню, как использовал zip для решения той же проблемы.

Обновлено: я нашел пример zip

     const  tpcomprob$ = this.data.getTPComprob( this.tpcomprobsId);
     const  comprobs$ = this.data.getComprobs(this.tpcomprobsId); 

     this.sbsComprobs = zip(tpcomprob$, comprobs$, (tpcomprob: any, comprobs: any) => ({tpcomprob, comprobs}))
                       .subscribe(pair => {
                          this.tpcomprob = pair.tpcomprob;
                          this.comprobs = pair.comprobs;

        },
        error => {this.httpError = error ;})
  });

Спасибо за ваш ответ, и это, вероятно, сработает. Но «this.tpcomprob» и «this.comprobs» являются глобальными переменными, которые будут присвоены в определенный момент времени. Я мог быть уверен, что они будут назначены одновременно, но не в том, что они будут назначены вообще, поэтому, когда я попытаюсь их использовать - они все равно могут или не могут быть пустыми, без какого-либо способа гарантировать (или заставить мои код для выполнения внешних запросов ждать). Наверное, мое понимание асинхронных операций, которое у меня есть из .net, здесь не подходит. Я вернусь к этой теме после некоторых исследований.

user3190541 14.09.2018 09:03

Из того, что я вижу здесь, rxmarbles.com/#zip zip будет ждать, пока 2 наблюдаемых объекта не завершатся и не выдадут или не выдадут ошибку. Таким образом, будут определены как tpcomprob, так и comprob.

wFitz 14.09.2018 09:42

Посмотрите на rxmarbles.com/#concat в этом случае, concat также будет работать, поскольку httpClient.get будет генерировать и завершать, но я думаю, что концептуально это неверно.

wFitz 14.09.2018 09:48

forkJoin - самый простой.

var _arr = [];

_arr.push(this.mySvc.callback01());
_arr.push(this.mySvc.callback02());

forkJoin(_arr).subscribe(resList=>{
    //-- the response will be in array
});

Другие вопросы по теме