如何在Angular 7中处理err_connection_refused HTTP错误并提示用户？

嘿，这个需求其实很好实现，咱们分两种场景来处理——要么针对单个请求做判断，要么封装全局拦截器统一处理所有请求的这类错误，我给你详细讲讲～

首先得搞懂这类错误的特征：当出现ERR_CONNECTION_REFUSED这种网络层面的错误时，Angular返回的HttpErrorResponse会有两个关键标识：

• status 为 0（因为服务器根本没返回任何HTTP状态码）
• error 属性是一个 ProgressEvent 对象，它的message通常会包含ERR_CONNECTION_REFUSED关键词（不同浏览器可能略有差异）

具体代码实现如下：

首先导入HttpErrorResponse：

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

然后在你的请求回调里做判断：

http.get('你的请求URL').subscribe(
  (response) => {
    // 处理正常响应逻辑
    console.log('请求成功:', response);
  },
  (error: HttpErrorResponse) => {
    // 判定是否是连接拒绝错误
    if (error.status === 0 && error.error instanceof ProgressEvent) {
      // 进一步精准匹配错误信息
      const isConnectionRefused = error.error.message.includes('ERR_CONNECTION_REFUSED');
      
      if (isConnectionRefused) {
        // 向用户显示提示，这里用alert示例，实际项目建议用UI组件库的提示（比如Toastr）
        alert('服务器连接被拒绝啦，请检查服务器是否正在运行哦～');
      } else {
        // 其他网络错误，比如网络断开
        alert('网络连接出问题了，请检查你的网络设置哦～');
      }
    } else {
      // 处理其他HTTP错误（比如404、500等）
      console.error('请求出错:', error);
      alert(`请求失败：${error.statusText}`);
    }
  }
);

如果你的项目里有很多请求，一个个写重复代码太麻烦，推荐用Angular的HTTP拦截器来统一处理这类错误，一次配置，所有请求都生效：

1. 创建错误拦截器 #

新建一个error.interceptor.ts文件，代码如下（这里假设用ngx-toastr做提示，你也可以换成自己项目的提示组件）：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ToastrService } from 'ngx-toastr'; // 需要先安装：npm install ngx-toastr

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {

  constructor(private toastr: ToastrService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        let errorMsg = '';
        
        if (error.status === 0 && error.error instanceof ProgressEvent) {
          // 处理网络类错误
          if (error.error.message.includes('ERR_CONNECTION_REFUSED')) {
            errorMsg = '服务器连接被拒绝，请确认服务器是否正常运行';
          } else {
            errorMsg = '网络连接异常，请检查你的网络设置';
          }
          this.toastr.error(errorMsg); // 用Toastr显示错误提示
        } else {
          // 处理其他HTTP状态码错误
          errorMsg = error.error?.message || error.statusText;
          this.toastr.error(`请求失败：${errorMsg}`);
        }
        
        return throwError(() => new Error(errorMsg));
      })
    );
  }
}

2. 注册拦截器 #

在app.module.ts里注册这个拦截器，让它生效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ToastrModule } from 'ngx-toastr'; // 导入Toastr模块
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Toastr需要动画模块

import { AppComponent } from './app.component';
import { ErrorInterceptor } from './error.interceptor';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot() // 初始化Toastr
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true // 允许多个拦截器
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

小提示 #

不同浏览器的错误消息可能不一样：

• Chrome的错误消息是net::ERR_CONNECTION_REFUSED
• Firefox可能是NetworkError: Connection refused

所以用includes('ERR_CONNECTION_REFUSED')来匹配已经足够精准，或者你也可以放宽条件，只要是status === 0的情况都提示用户检查服务器和网络，这样兼容性更好。

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