javascript - 如何一个接一个地调用一个异步函数？

Question

这就是我所拥有的：

  ngOnInit() {
    this._addServ.getDefaultAddress().subscribe((res)=>{
      if(res.status){
        //I need these next two functions to finish their async API requests 
        //before selectNormalDelivery is called
        this.selectShippingAddress();
        this.selectBillingAddress();
        this.selectNormalDelivery();
      }
    })
  }

我需要selectShippingAddress并selectBillingAddress完成他们的通话，然后selectNormalDelivery才能被调用。我怎样才能做到这一点？我不想将它们转换为承诺，因为它们在其他时候被调用而无需被链接。这涉及到.then什么？

这是函数的代码：

  selectShippingAddress(){
    this.addressService.setShippingAddresses(this.cartService.shippingAddress.address_id).subscribe((res) => {
      console.log('Set shipping address!')
      console.log(res);
    }, err => {
      console.log('Failed to set shipping address')
      console.log(err);
    })
  }

  selectBillingAddress(){
    this.addressService.setPaymentAddresses(this.cartService.billingAddress.address_id).subscribe((res) => {
      console.log('Set billing address!')
      console.log(res);
    }, err => {
      console.log('Failed to set billing address')
      console.log(err);
    })
  }

如果我尝试 a .then，我会得到 error Property 'then' does not exist on type 'void'.，这是有道理的，因为我不想返回任何东西，我只需要他们为了 API 的缘故完成他们的调用。

建议？

标签： javascriptangularasynchronouscallback

Answer 1

如果我理解正确，您需要听一个 observable (from getDefaultAddress())，然后处理另外两个 observable ( this.addressService.setShippingAddresses()and this.addressService.setPaymentAddresses())，然后再调用 function selectNormalDelivery()。

您可以通过使用 RxJS switchMap、catchError、tap运算符和forkJoin(). 尝试以下

import { forkJoin, EMPTY } from 'rxjs';
import { tap, catchError, switchMap } from 'rxjs/operators';

ngOnInit() {
  this._addServ.getDefaultAddress().pipe(
    switchMap((res) => {        // <-- map the observable from `getDefaultAddress()` to another observable
      if(res.status) {
        return forkJoin([       // <-- `forkJoin` emits only after the observables complete
          this.selectShippingAddress(), this.selectBillingAddress()
        ])
      }
    })
  ).subscribe(response => {
    this.selectNormalDelivery()
  })
}

selectShippingAddress() {
  return this.addressService.setShippingAddresses(this.cartService.shippingAddress.address_id).pipe(
    tap((res) => {            // <-- `tap` doesn't alter the response
      console.log('Set shipping address!')
      console.log(res);
    }),
    catchError((err) => {     // <-- `catchError` must return an observable
      console.log('Failed to set shipping address')
      console.log(err);
      return EMPTY;
    }))
}


selectShippingAddress() {
  return this.addressService.setPaymentAddresses(this.cartService.shippingAddress.address_id).pipe(
    tap((res) => {
      console.log('Set billing address!')
      console.log(res);
    }),
    catchError((err) => {
      console.log('Failed to set billing address')
      console.log(err);
      return EMPTY;
    }))
}