Question

我一直在使用keyup和Rxjs Subject

开发文本搜索

它搜索多个API并返回单个对象

一切正常，直到我清除文本字段，起初我得到404，因为应用程序仍然使用空查询进行http调用。

我可以通过检查字符串是否为空来抑制错误，但应用程序仍然无声地失败，这意味着：应用程序将不会更新，冻结

我在SearchComponent中设置了Subject并订阅了searchService中的搜索功能

public searchStr = new Subject<string>();

constructor(private searchService: SearchService) {
    this.searchService.search(this.searchStr)
    .subscribe((result)=> {
     this.result = result;
     this.movies = result[0];
     this.games = result[1];
     this.comics = result[2];

    })
   }

在html中

<input (keyup)="searchStr.next($event.target.value)">

服务

从searchComponent

观察到的搜索功能

 public search(query: Observable<string>){
    return query.debounceTime(400)
    .distinctUntilChanged()
    .switchMap(query => this.callSearches(query))
  }

它调用一个使用forkJoin执行API调用的函数

public callSearches(query){
    return Observable.forkJoin([
        this.searchMovies(query),
        this.searchGames(query),
        this.searchComics(query),
        this.searchMusic(query)
    ])
      .map((data)=>{
        this.searchResults = data;
        return this.searchResults

      })
      .catch((error) => {
        return Observable.throw(error)
      })

  }

以下是API调用之一;他们都很相似

public searchMusic(query): Observable<any>{
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

          return this.http.get(this.url+'/music/search/'+query, options)
             .map((data) => {
             let  result;
                  result = data.json().data.albums.items;
                  return result;
                })
            .catch((error) => {
          return Observable.throw(error)
         })
      }

我想知道别人如何处理这些问题

Answer 1

为什么不过滤空查询？

public search(query: Observable<string>){
    return query.debounceTime(400)
    .distinctUntilChanged()
    .filter(query => query.length > 0)
    .switchMap(query => this.callSearches(query))
  }

Answer 2

您的实施很好但我建议在进行搜索操作之前添加最小字符。

我建议输入3个字符后开始搜索

    <input (keyup)="searchStrFun($event.target.value)">

searchStrFun(input){
 if(input.length > 2) {  
        searchStr.next(input)
    }
}

冻结的地方冻结了吗？任何console.log

使用Subject和http客户端服务进行文本搜索的问题

2 个答案: