仅当第一个已成功执行时，如何调用另一个服务/api？答案

【问题标题】：How to call another service/api only if the first one has successfully executed?仅当第一个已成功执行时，如何调用另一个服务/api？
【发布时间】：2021-11-15 14:08:49
【问题描述】：

我对角度和打字稿很陌生。我一直在尝试这个。

doSomething() {
    return this.http.post(this.path + "dosomething", data).toPromise();
}

现在在 .ts 中，您正在等待它

await servicesCalls.doSomething();

在成功实施后，我需要对服务中的所有其他地图执行相同操作。

但首先我想确保它已经发布了数据。

await serviceCalls.doAnotherThing();

api 正在返回IHTTPACTIONRESULT，即Ok()。

谁能帮我解决这个问题？提前致谢！

【问题讨论】：

标签： javascript angular typescript promise

【解决方案1】：

使用 switchMap

doSomething() {
    return this.http.post(this.path + "dosomething", data);
}


doAnotherthing() {
    return this.http.post(this.path + "dosomething", data);
}

doSomething().pipe(
  tap(doSomethingResponse => this.performSomeOperation(doSomethingResponse)),
  switchMap(_ => this.doAnotherthing())
).subscribe(doAnotherthingResponse => console. log(doAnotherthingResponse));

【讨论】：

【解决方案2】：

没有必要使用承诺。 Angular 中的 HTTP 方法返回一个 Observable。您可以订阅该 observable，当该 observable 发出一些数据时，您可以在 subscribe 方法中调用另一个服务。

类似这样的::

doSomething() {
    return this.http.post(this.path + "dosomething", data);
}

现在有多种不同的方法可以做到这一点：

方法一：普通方法。在第一个订阅中调用另一个服务。

组件：

public callService() {
    doSomething.subscribe(data => {
        serviceCalls.doAnotherThing();
    },
    err => {
        // do something
    })
}

只有在 doSomething 函数（即您的 HTTP 请求返回某个值）时才会调用订阅。

方法2：可以使用rxjs操作符——switchMap这样：

doSomething()
    .pipe(
        //Use switchMap to call another API(s)
        switchMap((dataFromServiceOne) => {
            serviceCalls.doAnotherThing();
        })
    ).subscribe((data) => {
        // do something with response
        console.log(data);
    });

更多关于 rxjs 操作符的详细信息：

【讨论】：

【解决方案3】：

您可以简单地将其存储在这样的变量中，

const promise = servicesCalls.doSomething();

然后像这样简单地调用下一个，

promise.then(async () => await serviceCalls.doAnotherThing()).catch(e => console.error(e));

下一个 API 调用只会在上一个 Promise 解决时执行。

【讨论】：

这是一个指向正确方向的指针，但等待的承诺不再是承诺。您正在混合 async/await 和 then-blocks。您的“承诺”变量已经包含响应。所以要么删除“等待”，要么一直使用“等待”。
@MarkusDresch 是的，你是对的！编辑了答案。

【解决方案4】：

当使用 Angular http 客户端时，您通常会订阅 @Drashti Dobariya's answer 中提到的 observable。使用async/await时，还不如直接使用fetch。

当awaiting 某事时，程序流程在等待的承诺解决后继续。如果 http 请求成功，您可能想要的是检查：

let response = await servicesCalls.doSomething();

// you may have to handle different status codes
if (response.status != 200) {
  return;
}

response = await serviceCalls.doAnotherThing();

【讨论】：