Angular HTTP .catch无法捕获net::ERR_CONNECTION_RESET问题咨询

我特别理解你现在遇到的糟心问题——当后端API不可用时，原本指望catch能捕获到清晰的错误信息，结果拿到的却是一个冷冰冰、不好处理的Response对象，完全没法直接给用户展示友好提示对吧？这其实是旧版@angular/http模块（区别于后来的HttpClient）的特性：它会把所有请求相关的错误，不管是HTTP状态码错误还是网络连接失败，都包装成Response实例返回给catch。

下面是具体的修复方案和优化后的代码，帮你把这个不友好的Response转换成易懂的错误信息：

先搞懂错误的两种类型 #

在@angular/http里，你遇到的错误主要分两类：

• HTTP响应错误：比如404（API不存在）、500（后端崩溃）这类有明确状态码的错误，此时Response对象会包含状态码、响应体等信息
• 网络错误：比如API完全不可达、断网这种情况，此时Response的status会是0，ok属性为false，响应体是空的

优化你的Catch逻辑 #

你需要在catch里手动解析这个Response对象，把它转换成用户能看懂、你也好处理的错误信息，再重新抛出。

优化后的完整代码示例 #

import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
// 别忘了导入rxjs的操作符
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class AuthService {
  constructor(private http: Http) {}

  login(username: string, password: string): Observable<any> {
    const headers = new Headers({ 'Content-Type': 'application/json' });
    const requestBody = JSON.stringify({ username, password });

    return this.http.post('/api/login', requestBody, { headers })
      .map((response: Response) => {
        // 解析成功的响应体
        return response.json();
      })
      .catch((error: Response | any) => {
        let friendlyErrorMessage: string;
        
        // 判断是不是HTTP响应类型的错误
        if (error instanceof Response) {
          // 解析响应体里的错误内容，如果有的话
          const errorBody = error.json() || {};
          const backendError = errorBody.error || JSON.stringify(errorBody);
          friendlyErrorMessage = `请求失败：${error.status} - ${error.statusText}，详情：${backendError}`;
        } else {
          // 处理网络错误或其他非响应类错误
          friendlyErrorMessage = error.message ? error.message : `网络异常：${error.toString()}`;
        }

        // 把处理好的错误抛出去，让订阅的组件能拿到
        return Observable.throw(friendlyErrorMessage);
      });
  }
}

关键细节说明 #

• 区分错误类型：通过error instanceof Response判断是HTTP响应错误还是网络错误，分别处理
• 提取有用信息：对于HTTP错误，优先拿后端返回的错误详情；对于网络错误，直接取错误的原生消息
• 重新抛出错误：用Observable.throw()把友好的错误信息抛出去，这样订阅这个请求的组件就能直接拿到可以展示给用户的文本了

在组件里怎么用？ #

当你在组件中订阅登录请求时，就能直接处理这个友好的错误了：

this.authService.login('your-username', 'your-password')
  .subscribe(
    (successData) => {
      console.log('登录成功！', successData);
      // 这里处理登录成功的逻辑，比如跳转到首页
    },
    (errorMsg) => {
      console.error('登录失败', errorMsg);
      // 直接把errorMsg展示给用户，比如用alert或者组件内的错误提示框
      alert(`登录出错啦：${errorMsg}`);
    }
  );

另外提一句，如果之后有机会升级到Angular 4.3及以上版本，强烈建议换成新的HttpClient模块——它的错误处理更直观，会自动把网络错误包装成HttpErrorResponse，还内置了JSON解析，代码会简洁很多。

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