http.get()错误处理：设备无网络连接时的异常问题

嘿，这个场景太常见了！在Angular里处理无网络导致的HTTP请求错误，咱们可以从精准识别错误和提前规避无效请求两个角度来解决，给你具体的实现方案：

当设备断网时，Angular抛出的HttpErrorResponse属于客户端层面的错误（而非服务器返回的HTTP状态码错误），我们可以通过error.error instanceof ErrorEvent来区分，再结合错误消息里的ERR_INTERNET_DISCONNECTED标识来精准判断：

this.http.get<IApiResponse>(this.endpointURL, { headers: headers, params: params })
  .subscribe(
    (response: IApiResponse) => { 
      // 正常处理响应逻辑
    }, 
    error => {
      if (error.error instanceof ErrorEvent) {
        // 客户端/网络类错误
        if (error.error.message.includes('ERR_INTERNET_DISCONNECTED')) {
          console.log('哎呀，网络断开了！请检查你的网络连接~');
          // 这里可以替换成更友好的用户提示，比如弹出Toast、更新页面状态
        } else {
          console.log('客户端错误详情:', error.error.message);
        }
      } else {
        // 服务器返回的HTTP错误（比如404、500等）
        console.log(`服务器错误，状态码: ${error.status}`);
      }
    }
  );

如果想在用户发起请求前就告知网络状态，提升体验，可以利用浏览器原生的navigator.onLineAPI，或者监听online/offline事件：

// 在组件的初始化钩子中监听网络状态
ngOnInit() {
  window.addEventListener('online', this.handleNetworkChange.bind(this));
  window.addEventListener('offline', this.handleNetworkChange.bind(this));
}

private isOnline = navigator.onLine;

private handleNetworkChange() {
  this.isOnline = navigator.onLine;
  if (!this.isOnline) {
    console.log('网络已断开，请连接网络后重试哦');
    // 这里可以禁用操作按钮、显示全局提示组件等
  }
}

// 发起请求前先做检查
if (this.isOnline) {
  // 正常发起HTTP请求
  this.http.get<IApiResponse>(this.endpointURL, { headers: headers, params: params })
    .subscribe(/* 响应和错误处理 */);
} else {
  // 直接提示用户无网络，无需发起无效请求
  alert('当前无网络连接，请检查后重试');
}

如果你的应用有大量HTTP请求，写重复的错误判断代码太麻烦，用HTTP拦截器可以全局统一处理所有网络错误：

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';

@Injectable()
export class NetworkErrorInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // 识别无网络错误
        if (error.error instanceof ErrorEvent && error.error.message.includes('ERR_INTERNET_DISCONNECTED')) {
          // 全局提示用户，比如用自定义的弹窗组件
          alert('网络连接失败，请检查你的网络设置');
          // 也可以返回一个空的Observable或者自定义错误，避免组件层重复处理
        }
        // 把错误抛回给组件层（如果需要的话）
        return throwError(() => error);
      })
    );
  }
}

记得在AppModule里注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NetworkErrorInterceptor } from './network-error.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: NetworkErrorInterceptor, multi: true }
  ]
})
export class AppModule { }

简单总结下：提前检测适合在用户触发操作前做拦截，错误回调/拦截器适合处理请求过程中突发的网络断开情况，根据你的业务场景选就行~

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