Как избежать того, чтобы RxJ подписались на адский колбэк? - PullRequest
Новая
       6

Как избежать того, чтобы RxJ подписались на адский колбэк?

0 голосов
/ 20 сентября 2018

Я использую Angular RxJs subscribe, чтобы сделать вызов HttpClient, а затем сделать другой вызов, используя значения из первого.В этом случае есть вызов для получения address object, а затем я делаю вызов, используя этот объект.Как это: 

@Injectable()
export class AddressService {
  constructor(private http: HttpClient) { }

  getById(addressId: string, userId: string) {
    return this.http.get(BACKEND_URL + 'getAddressById/' + [addressId, userId]);
  }
}
  
export class AddressModalComponent implements OnInit {
  constructor(private alertService: AlertService, private addressService: AddressService,           @Inject(MAT_DIALOG_DATA) public data: any, private dropdownService: DropdownService)

  ngOnInit() {
    this.addressService.getById(this.data.id, this.data.userId)
        .subscribe(
          (address: Address) => {
            this.dropdownService.getCidadesBrByEstado(address.name)
              .subscribe((cities: BrCity[]) => {
                this.cities = cities;
                this.address = address;
              },
              error => console.log(error));
          }, error => { this.alertService.error(error);
          }
        );
    }
  }
}

Я пытаюсь избежать нескольких подписок, в моем коде много таких.Мне нужен Async/Await подход, подобный Node.js promises, но с использованием Observables на уровне компонентов.Я не очень знаком с RxJs commands ... есть ли лучший способ сделать много звонков с помощью только одного subscribe и catch?

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

Для угловых при использовании RxJS предлагается использовать Observable Class.Для решения ада обратного вызова в RxJS, вы можете использовать Observable 'API операторов как метод switchMap () (больше методов для другой сцены - map (), concatMap (), ...).Вот мой пример использования метода switchMap ():
(1) Ситуация, с которой я столкнулся: я хочу подписать serviceC, но serviceC требуется подписка serviceB, а serviceB нужна подписка serviceA 

const serviceA(params): Observable<any>;
const serviceB(params): Observable<any>;
const serviceC(params): Observable<any>;

serviceA(paramsA).subscribe(
    serviceAResult => {
        serviceB(paramsB).subscribe(
            serviceBResult => {
                serviceC(params).subscribe(
                    serviceCResult => {
                        // here is my logic code. Oh, Shit subscribe hell!
                    }
                )
            }
        )
    }
)

(2) Используйте метод switchMap () для оптимизации структуры кода 

const serviceB$ = serviceA(paramsA).pipe(
    switchMap(serviceAResult => {
        return serviceB(paramsB);
    })
);

const serviceC$ = serviceB$.pipe(
    switchMap(serviceBResult => {
        return serviceC(paramsC);
    })
);

serviceC$.subscribe(
    serviceCResult => {
        // here is my logic code.
    },
    error =>{
        // handle error
    }
);

Хороший пост о работе с callback hell .

0 голосов
/ 20 сентября 2018

Попробуйте что-то вроде: 

import { map, switchMap } from 'rxjs/operators'

this.addressService.getById(this.data.id, this.data.userId).pipe(
  switchMap(address => this.dropdownService.getCidadesBrByEstado(address.name).pipe(
    // this pass both cities and address to the next observable in this chain
    map(cities => ({ cities, address }))
  ))
).subscribe(({ cities, address }) => {
  this.cities = cities
  this.address = address
})
...