Angular API调用错误处理：捕获net::ERR_CONNECTION_REFUSED

嘿，我发现你这段Angular API调用的代码里有两个关键问题：一个是回调写法的语法错误，另一个是还没正确捕获net::ERR_CONNECTION_REFUSED这类网络连接错误。我来帮你一步步修正和完善。

首先先把代码里的语法问题搞定，然后再针对性处理连接拒绝的错误捕获：

import { HttpErrorResponse } from '@angular/common/http';

// 你的组件类内部代码
this.http.get(`http://localhost:5000/api/chatbot/connection/${this.token}`)
  .subscribe({
    next: (res) => {
      this.conversation = res;
    },
    error: (err: HttpErrorResponse) => {
      // 精准捕获连接拒绝错误
      if (err.status === 0) {
        console.log("无法连接到API服务：连接被拒绝，请检查服务是否启动");
        // 这里可以添加用户友好的提示，比如弹出通知
      } else {
        console.log(`API请求失败，状态码：${err.status}`, err.message);
        // 处理其他HTTP错误，比如404、500等
      }
    },
    complete: () => {
      console.log("请求流程已完成");
    }
  });

关键细节解释 #

• 修复回调语法错误：你原来的第一个回调写成了response => { res => this.conversation = res }，这相当于在一个函数里嵌套了另一个未执行的函数，导致响应数据根本不会赋值给this.conversation。换成对象形式的subscribe参数（Angular官方推荐的写法），逻辑更清晰，也避免了这类嵌套错误。
• 捕获连接拒绝错误：当出现net::ERR_CONNECTION_REFUSED时，Angular会返回HttpErrorResponse对象，其中status属性为0（因为没有收到服务器的任何响应）。通过判断这个状态码，就能精准识别这类网络连接问题。
• 类型安全：给error参数标注HttpErrorResponse类型，能获得IDE的类型提示，方便你访问错误的message、error详情等属性。

如果需要更细致的错误匹配，还可以通过检查错误消息的内容来确认：

if (err.message.includes("Connection refused")) {
  console.log("API服务连接被拒绝，请确认本地服务是否在5000端口运行");
}

这样就能完美解决你遇到的问题啦！

内容的提问来源于stack exchange，提问作者M.T