Angular Http Get请求返回404后无法发起后续请求求助

这个问题我之前在项目里也碰到过！核心原因是RxJS的Observable在抛出错误时会自动终止整个流——当你的服务返回404状态码时，错误会冒泡到订阅的err回调里，同时整个搜索流就被"中断"了，后续输入的关键词自然无法触发新请求。

下面是两种实用的解决方案，优先推荐第一种：

方案1：在HTTP请求层捕获错误，保持流活跃 #

你可以在服务的getCards方法里，用RxJS的catchError操作符捕获HTTP错误，返回一个包含空数据的Observable，这样错误就不会向上传递终止整个搜索流。

修改后的服务代码：

import { of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

// ...

getCards(term: string): Observable<any> {
  let url = this.scryFallEndpoint + 'search?q="' + encodeURI(term) + '"+unique:prints+not:digital';
  return this._http.get(url)
    .pipe(
      map(res => res),
      catchError(() => {
        // 返回带有空data数组的Observable，让流继续执行
        return of({ data: [] });
      })
    );
}

如果不想修改服务，也可以在组件的switchMap里直接处理错误：

import { of } from 'rxjs';
import { debounceTime, filter, distinctUntilChanged, switchMap, catchError } from 'rxjs/operators';

// ...

this.searchTerm.valueChanges.pipe(
  debounceTime(400),
  filter(searchTerm => searchTerm.length >= 3),
  distinctUntilChanged(),
  switchMap((searchTerm) => 
    this._scryfallService.getCards(searchTerm).pipe(
      catchError(() => of({ data: [] })) // 捕获单个请求的错误
    )
  )
).subscribe(
  data => this.cardSearchResults = data.data,
  err => console.error('发生未预期的错误:', err) // 仅处理搜索流本身的异常
);

这种方式的优势是：单个请求的错误不会影响整个搜索流的生命周期，后续输入关键词依然能正常发起请求，同时自动把搜索结果置空，完全符合你的需求。

方案2：错误发生后重新订阅流（备选方案） #

如果因为某些限制不能修改HTTP请求的Observable，你可以保存搜索流的引用，在错误回调里重新订阅：

const searchStream = this.searchTerm.valueChanges.pipe(
  debounceTime(400),
  filter(searchTerm => searchTerm.length >= 3),
  distinctUntilChanged(),
  switchMap((searchTerm) => this._scryfallService.getCards(searchTerm))
);

// 封装订阅逻辑
const subscribeSearch = () => {
  searchStream.subscribe(
    data => this.cardSearchResults = data.data,
    err => {
      this.cardSearchResults = [];
      subscribeSearch(); // 错误后重新订阅流
    }
  );
};

// 初始化订阅
subscribeSearch();

不过这种方式存在重复订阅的风险，代码复杂度也更高，所以优先推荐方案1。

注意事项 #

• 若使用RxJS 5版本，操作符名称是catch而非catchError，需对应调整导入语句。
• of是RxJS创建简单Observable的工具函数，记得从rxjs导入。

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