Как мне сделать два зависимых вызова POST в Angular?

Question

У меня есть один HTTP-вызов POST для введения моратория. Второй пост-вызов попытается использовать moratoriumID (возвращенный из первого вызова), чтобы вставить серию местоположений моратория. Я искал вокруг, и ответ, похоже, находится в служебном использовании switchMap () в .pipe (). Это верно? Если да, то почему я получаю следующую ошибку:

Argument of type '(dataFromSvc1: any) => void' is not assignable to parameter of type '(value: any, index: number) => ObservableInput<any>'.
  Type 'void' is not assignable to type 'ObservableInput<any>'.ts(2345)

См. Код и изображение ниже.

PostMoratorium(moratoriumtopost: Moratorium,moratoriumLocationstopostarray: MoratoriumLocation[]): Observable<number> {
const PostMoratoriumUrl = `${this.moratoriumUrl}`;

return this.apiService.postWithLocalErrorHandling(PostMoratoriumUrl, moratoriumtopost)
  .pipe(
     //I get the error here with dataFromSvc1 underlined !
    switchMap(dataFromSvc1 => {
      const PostMoratoriumLocationsUrl = `${this.moratoriumUrl}/moratorium/${dataFromSvc1}/location`;
      moratoriumLocationstopostarray.forEach(giveMoratoriumId);

      function giveMoratoriumId(item) {
        const moratoriumlocationtopost = {
          county:item.county ,
          city:item.city,
          zip:item.zipCode,
          moratoriumId:dataFromSvc1,
        } as MoratoriumLocation;
        return this.apiService.postWithLocalErrorHandling(PostMoratoriumLocationsUrl,moratoriumlocationtopost);      
      }  
    }
    )//switchMap
  );//pipe

}

Answer 1

Вы должны использовать concatMap для запросов, которые должны выполняться по порядку и зависят от предыдущего значения. Вы можете узнать об этом подробнее здесь

PostMoratorium(moratoriumtopost: Moratorium,moratoriumLocationstopostarray: MoratoriumLocation[]): Observable<number> {

   const PostMoratoriumUrl = `${this.moratoriumUrl}`;
   return this.apiService.postWithLocalErrorHandling(PostMoratoriumUrl, moratoriumtopost)
      .pipe(concatMap(dataFromSvc1 => {
          const PostMoratoriumLocationsUrl = `${this.moratoriumUrl}/moratorium/${dataFromSvc1}/location`;
          moratoriumLocationstopostarray.forEach(giveMoratoriumId);
          const moratoriumlocationtopost = {
             county: item.county,
             city: item.city,
             zip: item.zipCode,
             moratoriumId: dataFromSvc1
          } as MoratoriumLocation;

          return this.apiService.postWithLocalErrorHandling(PostMoratoriumLocationsUrl,moratoriumlocationtopost);      
      }  
    }
    )
  );

Позвольте мне объяснить, что здесь происходит:

1. this.apiService.postpostWithLocalErrorHandling(PostMoratoriumUrl, moratoriumtopost) вызывается и возвращает значение.
2. Это значение доступно в функции обратного вызова .concatMap как dataFromSvc1.
3. Теперь мы используем эти данные для дальнейшей обработки
4. И мы возвращаем this.apiService.postWithLocalErrorHandling(PostMoratoriumLocationsUrl,moratoriumlocationtopost); поскольку обратный вызов concatMap (как и switchMap) ожидает наблюдаемого. Теперь этот вызов Http выполнен.

Всегда используйте concatMap для цепочек наблюдаемых, которые зависят от предыдущего ввода и требуют порядка выполнения.

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