Angular项目中服务未启动/无访问权限时显示错误消息

我看了你提供的TkgmService代码，目前的实现缺少错误处理逻辑，而且getIlTum方法没有返回可订阅的Observable，这就导致你没法在组件层面捕获服务不可用的异常。咱们来一步步修改，实现你要的错误提示功能：

修改后的服务代码 #

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
// 把xml2js的parseString提前导入，避免在subscribe里动态require
const parseString = require('xml2js').parseString;

@Injectable()
export class TkgmService {
  private ws = 'http://10.30.1.242/MebProxy/Controllers/Service.asmx/';
  il: any[]; // 明确类型，避免隐式any
  ilce; mahalle; ada; parsel; geomAttr;

  constructor(private http: Http) { }

  getIlTum(): Observable<any[]> {
    // 如果数据已缓存，直接返回缓存数据的Observable
    if (this.il) {
      return Observable.of(this.il);
    }

    const url = this.ws + 'GetirIlTum?';
    return this.http.get(url)
      .map((res: Response) => {
        // 处理XML响应并缓存数据
        const cleanedResponse = this.cleanResponse(res.text());
        let parsedResult: any;
        parseString(cleanedResponse, (err, result) => {
          if (err) throw err; // 捕获XML解析错误
          parsedResult = result.ArrayOfIL.Il;
          // 优化字符串排序逻辑
          parsedResult.sort((a, b) => {
            const adA = a.Ad[0]; // 根据xml2js实际解析结构调整，通常是数组形式
            const adB = b.Ad[0];
            return adA.localeCompare(adB);
          });
          this.il = parsedResult;
        });
        return this.il;
      })
      .catch((error: any) => {
        // 捕获HTTP请求异常（服务不可达、网络中断等）
        console.error('服务请求失败:', error);
        // 抛出友好错误信息，供组件层面处理
        return Observable.throw('无法获取地区数据，请检查服务是否正常运行');
      });
  }

  // 补充cleanResponse方法的类型定义
  private cleanResponse(responseText: string): string {
    // 这里放你的响应文本清理逻辑
    return responseText;
  }
}

关键修改点说明 #

• 让方法返回Observable：这样组件可以订阅方法，同时处理成功和错误回调，实现错误提示的传递。
• 添加catch操作符：专门捕获HTTP请求过程中的异常（比如服务未启动、网络中断、请求超时等），在这里可以记录日志，再抛出用户友好的错误信息。
• 优化缓存逻辑：如果已经获取过数据，直接返回Observable.of(this.il)，避免重复发起请求。
• 规范代码结构：把xml2js的工具导入提前到顶部，同时处理XML解析可能出现的错误，避免隐藏bug。

在组件中使用并显示错误提示 #

在你的组件里，订阅服务方法后，在错误回调里展示提示信息（这里用Angular Material的MatSnackBar举例，你也可以用自定义提示组件或原生alert）：

import { Component, OnInit } from '@angular/core';
import { TkgmService } from './tkgm.service';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-il-list',
  templateUrl: './il-list.component.html'
})
export class IlListComponent implements OnInit {
  ilList: any[];

  constructor(
    private tkgmService: TkgmService,
    private snackBar: MatSnackBar
  ) { }

  ngOnInit(): void {
    this.tkgmService.getIlTum()
      .subscribe(
        (ilData) => {
          this.ilList = ilData;
        },
        (errorMsg) => {
          // 弹出错误提示
          this.snackBar.open(errorMsg, '关闭', {
            duration: 5000,
            horizontalPosition: 'center',
            verticalPosition: 'top'
          });
        }
      );
  }
}

这样一来，当服务不可达或者请求失败时，组件就会弹出友好的错误提示，用户能清晰了解问题原因。

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