时间戳

首页 > 解决方案 > 处理 async/await Angular HttpClient 方法中的错误

javascript - 处理 async/await Angular HttpClient 方法中的错误

问题描述

我正在尝试使用异步/等待模式来处理可能被视为“回调地狱”的场景，如果以其他方式实现的话。

这是代码的一个极其简化的版本。真正的代码有大约 5 个基于第一次调用（不是我的 api ......）的数据的条件 HttpClient 调用，这就是我首先使用 async/await 模式的原因。

async blah(): Promise<boolean> {
    try {
        let resp = await this.http.get("https://httpstat.us/500").toPromise();
        console.warn("you should not see this");

        // the real code will logically call the api multiple times based on conditonal data from resp
        // hence the attempted usage of async/await to avoid "callback hell"
        // blah() will eventually return an object.

        return true;
    }
    catch (err) {
        console.error("caught inside blah()");
        throw err;
    }
}

ionViewDidLoad() {
    this.blah().then(data => {
        console.warn('okokokok');
    }).catch(error => {
        console.error(error)
    });
}

发生了什么，我可以看到调用实际上是 500，但代码继续，并且以下内容打印到控制台：

polyfills.js:3 GET https://httpstat.us/500/ 500 (Internal Server Error)
main.js:927 you should not see this
main.js:940 okokokok

如您所见，它没有捕获 500（或我测试过的任何其他 http 状态）

我正在测试的设备是运行 P 的 Pixel 2，控制台数据来自 Chrome 设备检查器会话。

任何建议将不胜感激。

** 编辑：这显然是离子和角度组合的问题......它应该工作......

** 编辑：事实证明 100% 是 Angular 问题......不是框架本身，而是拦截器是如何实现的。我将把它留在这里，而不是在其他人需要它的极少数情况下删除问题。

标签： javascriptangulartypescriptionic-framework

解决方案

如果我正确理解了您的问题，您想要进行级联调用，因此您发出 http 请求并根据您想要进行另一个 http 调用的响应。如果是这种情况，那么您应该考虑使用switchMap运算符：

this.http.get("https://httpstat.us/500").pipe( switchMap( result => { if(result.a === 5) { return this.http.get("some server api url"); } return return this.http.get("another server api url"); }) )

然后您处理错误rxjs。

查看级联调用

推荐阅读