“Response”类型的参数不可分配给“string”类型的参数

Question

我正在做这个项目。 这个想法是使用 Angular 4

从 google book API 检索书籍

我很难理解如何读取 JSON 响应，我仍在学习 Angular。 我在网上搜索并在 GitHub 上找到了这个源代码 谷歌书店

我收到以下错误

Argument of type 'Response' is not assignable to parameter of type 'string'.

对于这条线

  let bookResponse = JSON.parse(body);

我不确定我的做法是否正确。 感谢您的帮助

下面是我发送HTTP请求的方法。

  getBooks(searchparam: any){
let par = new HttpParams();
par.set('q', searchparam);

return this.httpClient.get('https://www.googleapis.com/books/v1/volumes', {
  params : new HttpParams().set('q',searchparam)
}).map(
  (response: Response) => {
    let data = response;

    return data;
  }
);

}

以下是从 HTTP 请求获取数据并读取 JSON 响应的方法

  getBook() {

const dataArrya = this.searchForm.get('param').value;

console.log(dataArrya);
this.requestService.getBooks(dataArrya)
  .subscribe(
    response  => {
      this.printData(response)
    //  console.log(this.bookData);
    },
    (error) => console.log(error)
  ); 

}

 private printData(res: Response) {

let body = res;
let books: Array<Book> = new Array<Book>();
let bookResponse = JSON.parse(body);
console.log(bookResponse);
console.dir(bookResponse);
for (let book of bookResponse.items) {
  books.push({
    title:book.volumeInfo.title,
    subTitle: book.volumeInfo.subTitle,
    categories: book.volumeInfo.categories,
    authors: book.volumeInfo.authors,
    rating: book.volumeInfo.rating,
    pageCount: book.volumeInfo.pageCount,
    image: book.volumeInfo.imageLinks === undefined ? '' : book.volumeInfo.imageLinks.thumbnail,
    description: book.volumeInfo.description,
    isbn: book.volumeInfo.industryIdentifiers,
    previewLink: book.volumeInfo.previewLink
  });
}

}

Answer 1

JSON.parse

接受一个字符串，但您向它传递一个 Angular

Response

，它是一个对象（不是字符串）。为了将 Angular

Response

转换为字符串，您可以对其调用

toString

，如下所示：

let bookResponse = JSON.parse(body.toString());

Answer 2

正如参考文献所述，

responseType 值决定如何解析成功的响应正文。如果responseType是默认的json，则结果对象的类型接口可以作为类型参数传递给request()。

HttpClient

get

已默认使用

JSON.parse

解析响应，无需调用两次。

结果是普通对象，而不是

Response

（它属于

Http

API，在不导入时可能会与

Response

全局混淆）。

提到的 repository 使用 Angular 2 和

Http

，那里的代码不适合这里。

HttpClient

是 Angular 4 中引入的较新 API。

Http

和

HttpClient

之间的主要实际区别是后者不需要将

.map(response: Response => response.json())

添加到请求中。

Answer 3

确保您已从express导入接口

import { Request, Response } from "express";

然后像这样在你的代码中使用它

const create = async (req: Request, res: Response) => {...}