javascript - การจัดการข้อผิดพลาดในเมธอด Angular HttpClient แบบ async/await

ฉันกำลังพยายามใช้รูปแบบ async/await เพื่อจัดการกับสถานการณ์ที่อาจถูกพิจารณาว่าเป็น "callback hell" หากนำไปใช้อย่างอื่น

นี่คือเวอร์ชันที่ทำให้ง่ายสุด ๆ ของโค้ด โค้ดจริงมีการเรียก HttpClient แบบมีเงื่อนไขประมาณ 5 ครั้งขึ้นอยู่กับข้อมูลจากการเรียกครั้งแรก (ไม่ใช่ API ของฉัน...) ซึ่งนี่คือเหตุผลที่ฉันใช้รูปแบบ 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 อื่น ๆ ที่ฉันทดสอบแล้ว)

อุปกรณ์ที่ฉันทดสอบด้วยคือ Pixel 2 ที่ใช้งาน P และข้อมูลจากคอนโซลมาจากเซสชันตัวตรวจสอบอุปกรณ์ของ Chrome

คำแนะนำใด ๆ จะได้รับการชื่นชมอย่างมาก

** แก้ไข: นี่ชัดเจนว่าเป็นปัญหาจากการรวมกันของ Ionic และ Angular... มันควรจะทำงานได้...

** แก้ไข: ปรากฏว่ามีสาเหตุจาก Angular 100% ... ไม่ใช่ตัว framework เอง แต่เป็นวิธีที่มีการใช้งาน interceptor ฉันจะปล่อยสิ่งนี้ไว้ที่นี่แทนการลบคำถามในกรณีที่มีคนอื่นต้องการมัน

คำตอบ #1

ถ้าผมเข้าใจคำถามของคุณถูกต้อง คุณต้องการทำการเรียกแบบลำดับชั้น ดังนั้นคุณจึงทำการเรียก 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

ดูการเรียกแบบเรียงลำดับ