如何使用来自异步数据流（可观察）的数据进行 API 调用？答案

【问题标题】：How do I make an API call with data from an asynchronous data stream (observable)?如何使用来自异步数据流（可观察）的数据进行 API 调用？
【发布时间】：2018-09-04 23:48:41
【问题描述】：

我正在编写一个 Angular 2 图书搜索应用程序，它通过应用程序的服务与 API 进行交互。我有一个表单供用户将书籍上传到后端的数据库，在提交时运行uploadBook 函数：

uploadBook(){
    //collects form data and uses it to set the value of this.book

    this._uploadService.uploadBookToDb(this.book)
        .subscribe( res => {
            alert('book uploaded');
        })
  }

在upload.service.ts:

uploadBookToDb(book){
    return this._http.post(environment.apiUrl + '/book_new', JSON.stringify(book))
        .map(res => res.json());
    }

这工作正常，我像往常一样从服务器收到响应。但是，当我尝试在用户键入时进行图书查找时遇到了麻烦：

bookTitle.valueChanges
        .debounceTime(1000)
        .map(bookTitle => this._uploadService.bookLookUp(bookTitle))
        .subscribe(res => update dropdown with results);

在服务中bookLookup 类似于上面的工作uploadBookToDb：

bookLookUp(title){
    return this._http.post(environment.apiUrl + '/book_lookup', JSON.stringify(title))
        .map(res => res.json());
  }

但是，当我在书名字段中输入时，会返回 observable 本身：Observable {_isScalar: false, source: Observable, operator: MapOperator}。服务器上没有记录任何活动，即根本没有执行服务中的 API 调用。

我确定我错误地将 observable 映射到服务，但在处理异步数据请求时如何正确执行此操作（例如 valueChanges）感到困惑。非常欢迎任何帮助解决这个问题。

【问题讨论】：

标签： angular angular2-observables

【解决方案1】：

你应该订阅 bookLookUp(title).. 在某处返回的 observable。

不确定您的确切版本，但如果您使用 5+，请使用 HttpClient 而不是完整的 Http 并删除 .map(res => res.json()); - 不再需要。

【讨论】：

这就是我试图用bookTitle.valueChanges .debounceTime(1000) .map(bookTitle => this._uploadService.bookLookUp(bookTitle)) .subscribe(res => {books = res});做的事情
好吧，那么订阅值变化呢？你已经注释掉了那里的订阅，为什么？
抱歉，这有点误导，注释掉是因为我还没有在其中写出函数，但是在我的代码中我订阅了 valueChanges 而没有 .subscribe 注释掉
那么您愿意更正问题中的代码吗？尝试在bookTitle.valueChanges 中将map 更改为switchMap 运算符
谢谢，switchMap 工作！现在试图理解为什么它在 map 上工作，是因为它取消了之前订阅的 observable 并防止了某种破坏操作的管道构建？