Come fare richieste POST per salvare una lista di oggetti sequenzialmente in angolari 4/5 - angolari, servizi web, osservabili

Come posso affrontare il seguente problema in 4/5 angolare?

Ho un elenco di oggetti che sono correlati da parentId, per esempio

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

Devo salvarli tramite il servizio Web chiamando il metodo POST tre volte. Il requisito è che devo salvarli in modo sincrono. Voglio dire, devo aspettare fino a quando Parent Unit viene salvato, il servizio Web restituisce il nuovo id e quindi posso fare un'altra richiesta POST con modificato parentId per Unit Child 1 al servizio web e la richiesta simile con modificata parentId per Unit Child 2.

Io uso Observables per creare servizi Web nella mia app angolare. Qualche idea su come posso farlo?

risposte:

0 per risposta № 1

Probabilmente intendi "in sequenza" :)

Il primo problema è che la struttura dei dati non lo èdavvero adatto per questo caso d'uso. Penso che sarebbe meglio avere una struttura gerarchica, non piatta. Ma se deve rimanere, allora lo implementerei in questo modo. Se si esegue il refactoring della propria struttura dati, il codice per il salvataggio potrebbe essere migliore.

// 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
});
}

---

0 per risposta № 2

Incatenali:

Supponendo che tu usi Angular "s HttpClient:

const http = new HttpClient();

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

Quindi, iscrivendosi a result puoi sapere quando le tre operazioni sono terminate o se si è verificato un errore. Naturalmente, in ogni flatMap puoi anche fare qualcosa con result, la risposta dal server o semplicemente ignorarla.

Ora, se vuoi un modo per concatenare N chiamate, puoi definire una funzione come:

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

Come vedi, prende l'osservabile da una richiesta precedente e incatena il nuovo ad esso. Se non c'è una richiesta precedente (lo è null o undefined), restituisce direttamente l'osservabile restituito da HttpClient.post. Quindi lo usi in questo modo:

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

Ora puoi iscriverti al request osservabile e attendere che finisca o si verifichi un errore.

Certo, qui ho usato any sia per i dati inviati che restituiti dal servizio, perché non so se si dispone di tipi o interfacce personalizzati, ma, in ogni caso, è possibile modificarli in base alle proprie esigenze.

---