Please excuse the silly question but I have always done my http requests the same way since learning them back when I started my NG journey. I've built many NG applications now and they all rely heavily on API requests so I'm keen to find the best way to handle a particular scenario - or maybe all http requests moving forward.

The 1st example below is my standard approach where I subscribe from the component.ts file, this is fine for simple CRUD ops but when chaining events together based on the result of a previous API request it can seen go several levels deep with IF statements.

I've been using NestJS a lot recently and as a result have been using async/await more than usual which this has led to me to refactor my standard approach as per the second example.

My question is, is the second approach ok to do in Angular? Is there a better approach that avoids going 2,3 or 4 deep on the IF this, IF that handling of results? Am I stuck in 2015 and should be doing it completely differently now?

Example: I create a user, if success then I want to then execute API POSTs to create other data which must include the userId returned from the initial user.create(). Example shows billing address being created but there could be other additional posts like create delivery address, create payment card etc. (It's an ecommerce basket & checkout for multiple user types, product types and purchase types)

My standard method would be to create the functions in user.service.ts along the lines of;

createUser(user) {
    return this.http.post(this.env.apiPath   'users/signup', user , this.apiService.getHttpOptions())
    .pipe(
        map((data: user) => {
                return data;
            },
            catchError(this.apiService.handleError)
        ));
}

createAddress(address) {
    return this.http.post(this.env.apiPath   'user/address', address , this.apiService.getHttpOptions())
    .pipe(
        map((data: address) => {
                return data;
            },
            catchError(this.apiService.handleError)
        ));
}
... other create methods...

This would be called from the user.component.ts file in this way;

        this.userService.createUser(this.user).subscribe(userData => {
            if (this.userData.success) {
                this.billingAddress.userId = this.userData.user.id;
                this.userService.createAddress(this.billingAddress).subscribe(addressData => {
                    // do more stuff
                    // end and move on type stuff
                });
            }
        });

Async/Await approach

user.service.ts

    async createUser(user) {
        const result: user = await this.http.post(this.env.apiPath   'users/signup', user , this.apiService.getHttpOptions())
            .toPromise();
        return result.data;
    }

    async createAddress(address) {
        const result: user = await this.http.post(this.env.apiPath   'users/address', user , this.apiService.getHttpOptions())
            .toPromise();
        return result.data;
    }
... other create methods....

user.component.ts

        const userCreateResult: user = await this.userService.createUserAysnc(this.user)
            .catch(err => {
                // handle error
            });
        // no error so continue
        if (userCreateResult) {
            this.billingAddress.userId = userCreateResult.user.id;
        }

        const billingAddressResult: address = await this.userService.createAddress(this.billingAddress)
            .catch(err => {
                // handle error
            });
        // no error so continue
        if (billingAddressResult) {
            // assign some vars and do whatever else is required
        }