Angular 5：请求失败后ngModelChange触发时API不再调用的问题

这个问题我太熟悉了——这是RxJS初学者常踩的一个坑！问题出在Observable的错误处理机制上：当你的HTTP请求返回404错误时，这个错误会冒泡到外层的订阅，导致整个searchStream的订阅被终止，所以后续输入任何城市都不会再触发API请求了。

为什么会这样？ #

RxJS的Observable有个默认行为：一旦Observable抛出错误，整个订阅就会立即结束，不再接收任何新的事件。你的代码里，switchMap会把searchStream的每个值转换成HTTP请求Observable，当这个请求返回404时，错误会传递到subscribe的错误回调函数，之后整个订阅就“死掉”了——不管你再输入多少城市，searchStream发射的新值都不会被处理。

怎么修复？ #

核心思路是不让HTTP请求的错误冒泡到外层订阅，我们可以在switchMap内部的HTTP请求Observable上，用catchError操作符捕获错误，返回一个“安全”的Observable（比如空Observable），这样外层订阅就不会被终止，后续的输入依然能正常触发API请求。

修改后的weather-search.component.ts代码如下：

import { Component, OnInit } from '@angular/core';
import { Subject, empty } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap, catchError } from 'rxjs/operators';
import { WeatherService } from './weather.service';

@Component({
  selector: 'app-weather-search',
  templateUrl: './weather-search.component.html'
})
export class WeatherSearchComponent implements OnInit {
  city: string = ''; 
  data: any = {}; 
  private searchStream = new Subject<string>();

  constructor(private weatherService: WeatherService) { }

  onCityChange(){
    if(this.city) {
      this.searchStream.next(this.city);
    } else {
      this.data = {};
    }
  }

  ngOnInit() {
    this.searchStream
      .debounceTime(500)
      .distinctUntilChanged()
      .switchMap((input: string) => 
        // 在HTTP请求内部捕获错误
        this.weatherService.searchWeatherData(input).pipe(
          catchError(err => {
            console.error(err);
            this.data = {};
            return empty(); // 返回空Observable，避免错误终止外层订阅
          })
        )
      )
      .subscribe(
        (data) => this.data = data
        // 这里不需要错误回调了，因为错误已经在内部处理
      );
  }
}

关键修改点说明： #

1. 导入catchError操作符和empty Observable
2. 在switchMap内部，为weatherService.searchWeatherData(input)添加.pipe(catchError(...))
3. 把原来subscribe里的错误处理逻辑移到catchError中，并返回empty()——这个空Observable会正常完成，不会抛出错误，因此外层订阅会保持活跃状态
4. 可以根据需求调整catchError的返回值：比如返回of({})给一个默认空数据，或者返回throwError(err)（但这样又会终止订阅，所以不推荐）

这样修改后，即使输入错误城市触发404，后续输入正确城市时，API依然会正常被调用，订阅不会被终止。

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