how to run subscribe sequentially in observable

Question

I want to run code sequentially but I was wondering how this works, for example, I have a method that includes two observable and some fields. I want to run the first observable completely then the next field values check and after that the last observable method:

// first it should be run completely --Step1

ontemplateSelectChanged(e){
const api = 'api/Sales/SaleTemplate/' + e;
this.dataSourceService
      .generateCustomApiDataList('sales', 'SaleTemplate', api)
      .dataList$.subscribe(
        (data) => {
this.saleTemplateDsDto.saleTemplateDto = data.rows['saleTemplateDto'];
});
// 2nd this should be check --step 2
if (myCondition){
// a lot of code here
    alert("we are here")
    }
    // this should be run at the end. --step 3
     const additionApi =
            'api/Sales/Addition/List?$filter=AdditionCode eq ' +
            additionCodefilterValue;
          this.dataSourceService
            .generateCustomApiDataList('sales', 'Addition', additionApi)
            .dataList$.subscribe(
              (data) => {            
                additionDtoList = data.rows;})
    }

but at the current stage step 2 completed first and step 3 next and at the end step 1. and sometimes it works fine. I read about concat here, I know this is a nice feature to get what I need but to be honest I couldn't use it, and that only work if we have 2 observable over next each other(only step 3 and step 1).

score 1 · Accepted Answer · answered Mar 25 '21 at 22:58

There isn't enough data to go around, but for a start you could use tap and switchMap operators. tap would be used for "step 2" and switchMap would be used to map to another observable (in your case "step 3", the 2nd HTTP request).

Try the following

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

ontemplateSelectChanged(e) {
  const api = 'api/Sales/SaleTemplate/' + e;
  this.dataSourceService
    .generateCustomApiDataList('sales', 'SaleTemplate', api)
    .dataList$
    .pipe(
      tap((data: any) => {
        this.saleTemplateDsDto.saleTemplateDto = data.rows['saleTemplateDto'];
        if (myCondition) {
          // a lot of code here
          alert("we are here")
        }
      }),
      switchMap(() => {
        const additionApi =
          'api/Sales/Addition/List?$filter=AdditionCode eq ' +
          additionCodefilterValue;
        return this.dataSourceService
          .generateCustomApiDataList('sales', 'Addition', additionApi)
          .dataList$;
      })
    ).subscribe(
      (data) => {
        additionDtoList = data.rows;
      }
    );
}

thanks for sharing , I got that by switchMap we can unsubscribe from first request and by tap we can say what after, can't we? only one more tip . how about more than 3 step, for example in step 4 we have another obeserable or request. can we use switchMap with 3 or more request? — Ali Eshghi, Mar 26 '21 at 20:39
Yes you could keep piping additional operators as required. So if step 4 returns an observable, you could pipe in an additional `switchMap`. — ruth, Mar 28 '21 at 08:51

how to run subscribe sequentially in observable

1 Answers1