如何使用 mergeMap Angular 处理 Typeahead 搜索中的错误场景答案

【问题标题】：How to handle error scenario in Typeahead search with mergeMap Angular如何使用 mergeMap Angular 处理 Typeahead 搜索中的错误场景
【发布时间】：2021-04-26 07:29:14
【问题描述】：

尝试使用 API 数据进行 Typeahead 搜索功能，如果我们提供有效数据，自动提示将正确出现，如果我们提供无效数据，则会给出错误消息，但如果我们再次输入有效数据，则 API 不会触发。所以我尝试修复并尝试下面的代码并帮助我如何处理无效数据的错误场景。

asyncData: string;
dataSource: Observable<any>;

this.dataSource = new Observable((observer) => {
    observer.next(this.asyncData)
}).mergeMap(() => {
    return this.http.get('/api/testAPI',{params: {param1: param1}});
});

【问题讨论】：

"如果我们提供无效数据，它会给出错误消息“你怎么知道它无效
我在文本框上显示无效数据的错误消息，如果无效数据 API 提供此数据 "{"timestamp":"2020-04-22T07:22:35.004+0000","errorMessage": "未找到结果","errorCode":404,"errorDetails":"uri=/API/testAPI"}"
this.http 如何返回 this.http.get('/api/testAPI',{params: {param1: param1}});工作正常吗？ this.http 是什么返回 this.http ？这里有问题
如果我输入一些有效数据，它会给出预先输入的列表，如果我们给出像任何字符这样的无效数据，特殊字符会给出上面的错误消息，并且我会在文本框中显示无数据。我再次尝试提供有效数据，这次没有触发 API。
你应该试着用这个做一个 stackblitz 例子，因为你的代码看起来根本不应该工作，尝试使用stackblitz.com/edit/rxjs-searchbox-example这个例子

标签： angular typescript rxjs

【解决方案1】：

new Observable() 似乎没有必要。未显示 HTTP 请求的用法。无论如何，您需要的是某种形式的错误处理。您可以使用 catchError 运算符将错误转换为有效响应或不发出它们。

import { NEVER } from 'rxjs';
import { catchError } from 'rxjs/operators';

return this.http.get('/api/testAPI',{params: {param1: param1}}).pipe(
  catchError(() => NEVER)
);

这使用不会发出的 RxJS NEVER 常量。如果您希望处理订阅中的错误，请注意。这不会发射。

【讨论】：

嗨@Michael D，我刚刚添加了 .pipe(catchError(() => NEVER));如果我们先输入无效数据并输入有效数据，仍然无法正常工作。API 不会触发。
@Rajasekhar：试试pipe(catchError(() => of(null)))
嗨@Michael D，如果可能的话，请你帮我解决这个问题，stackoverflow.com/questions/67549092/…