带有 id 和密钥的 API 调用答案

【问题标题】：Api call with id and key带有 id 和密钥的 API 调用
【发布时间】：2021-02-21 04:03:12
【问题描述】：

我想从https://trackapi.nutritionix.com/v2/natural/nutrients 获取卡路里计算器的数据。它需要 x-app-id 和 x-app-key 进行身份验证。

我尝试过的： (Service.ts)

fetchFood(){
  let url = 'https://trackapi.nutritionix.com/v2/natural/nutrients';
let headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'x-app-id': 'aea728dc',
  'x-app-key': 'b945aeaf7ce6a860870f8686248a9485',
});
let query="banana"
let options = { headers: headers };
return this.http.post<any>(url, {query}, options).pipe(
  map((res) => {
    console.log(res);
  })
);

}

  this.authService.fetchFood();

当我控制台响应时它什么也不显示。 api调用有问题吗？？

谢谢！！

【问题讨论】：

标签： javascript angular typescript api

【解决方案1】：

您正在使用map 运算符，用于交替响应。请改用tap 运算符。

return this.http.post<any>(url, {query}, options).pipe(
  tap((res) => {
    console.log(res);
  })
);

【讨论】：

【解决方案2】：

查看订阅和映射Ref的区别

return this.http.post<any>(url, {query}, options).subscribe((res) => {
    console.log(res);
  })
);

【讨论】：

【解决方案3】：

你需要订阅一个cold observable来触发请求。

注册组件

someHandler() {
  this.authService.fetchFood().subscribe({
    next: res => {
      console.log(res);
      // do something else
    },
    error: error => {
      // handle error
    }
  });
}

另外，如其他答案中所述，您可以在服务中使用 tap 而不是 map 运算符进行日志记录。 map 用于转换响应。

【讨论】：