Angular中如何在DELETE Web API执行完成后调用GET Web API

要确保DELETE请求执行完成后再调用loadContacts()，可以通过以下两种方式实现：

方式一：在delete的订阅回调中触发loadContacts #

把loadContacts()放在delete请求的next回调里，这样只有当删除请求成功完成后，才会执行加载联系人的操作：

if (confirm("Are you sure you want to delete the contact?")) {
    this.http.delete(this.apiRoot + id)
        .subscribe({
            next: () => {
                // 删除成功后，加载最新的联系人列表
                this.loadContacts().subscribe();
            },
            error: (err) => {
                // 处理删除失败的情况，比如提示用户
                console.error('删除联系人失败', err);
            }
        });
}

方式二：用RxJS操作符串联请求（推荐） #

使用switchMap操作符将两个请求串联起来，这种写法更符合RxJS的链式编程风格，也便于统一处理订阅和错误：

import { switchMap } from 'rxjs/operators';

// ...

if (confirm("Are you sure you want to delete the contact?")) {
    this.http.delete(this.apiRoot + id)
        .pipe(
            // 删除完成后，切换到加载联系人的请求
            switchMap(() => this.loadContacts())
        )
        .subscribe({
            next: () => {
                // 联系人列表加载完成后的逻辑
            },
            error: (err) => {
                console.error('操作失败', err);
            }
        });
}

原代码问题说明 #

你原来的写法中，delete和loadContacts的订阅是同步触发的，两个请求会同时发起，无法保证删除操作先完成。上面两种方法都能确保DELETE请求成功执行后，再触发联系人列表的加载。

内容的提问来源于stack exchange，提问作者user3742300