如何发出 POST 请求以按角度 4/5 顺序保存对象列表

Question

如何在角度 4/5 中解决以下问题？

我有一个由parentId相关的对象列表，例如

[
  {
    id: 10,
    name: "Parent Unit",
    parentId: null,  
  },
  {
    id: 11,
    name: "Unit Child 1",
    parentId: 10,  
  }, 
  {
    id: 12,
    name: "Unit Child 2",
    parentId: 10,  
  } 
]

我需要通过 Web 服务通过调用 POST 方法保存它们三次。要求是我必须同步保存它们。我的意思是，我必须等到保存Parent Unit，Web 服务返回其新id，然后我可以发出另一个具有修改parentId的 POST 请求，以便Unit Child 1 Web 服务，以及类似的请求，其中包含修改parentId的 Unit Child 2。

我使用Observables在我的角度应用程序中制作 Web 服务。任何想法我该怎么做？

Answer 1

您可能的意思是"按顺序":)

第一个问题是您的数据结构并不适合此用例。我认为最好有层次结构，而不是扁平结构。但如果它必须保留，那么我会像这样实现它。如果你重构你的数据结构，那么保存的代码可能会更好。

// pseudo code
 save() {
 // first request
 let promise = httpService.post('someurl', parentObject)
    .then(() => {
      // second request for children
      return httpService.post('someurl', childObject);
    })
    .catch((err) => {
      // handle error
    });
}

Answer 2

将它们链接起来：

假设你使用Angular的HttpClient：

const http = new HttpClient();
const result = http.post(urlService, item1)
  .flatMap(result => http.post(urlService, item2))
  .flatMap(result => http.post(urlService, item3));

然后，通过订阅result您可以知道三个操作何时完成或是否存在错误。当然，在每个平面映射中，您也可以使用result，服务器响应或忽略它。

现在，如果你想要一种链接 N 个调用的方法，你可以定义一个函数，例如：

chainPost(request: Observable<any>, url: string, item: any): Observable<any> {
    return request ? request.flatMap(() => http.post(url, item))
                   : http.post(url, item);
}

如您所见，它从以前的请求中获取可观察量，并将新请求链接到该请求。如果没有先前的请求(它是null或undefined(，它直接返回HttpClient.post返回的可观察量。然后你像这样使用它：

const requests: any[]  = [{...},{...}, ...]; // any number of items
const request = requests.reduce((previous, item) => chainPost(previous, url, item));

现在，您可以订阅可观察request并等待它完成或抛出错误。

当然，在这里我使用any来表示服务发送和返回的数据，因为我不知道您是否有自定义类型或接口，但是，无论如何，您可以更改它以满足您的需求。