未进行 API 调用，因为它未反映在 Google chrome 开发人员工具的网络选项卡中
Posted
技术标签:
【中文标题】未进行 API 调用，因为它未反映在 Google chrome 开发人员工具的网络选项卡中【英文标题】：API call not being made as it is not reflecting in the network tab in Google chrome developer tools 【发布时间】：2020-02-17 04:36:31 【问题描述】：我正在尝试调用配方 API，解析响应，然后在 html 中显示它。代码如下：
display-recipes.component.html
<p>display-recipes works!</p>
<div id='display_recipe' *ngFor="let recipe of recipeResult.hits">
calories recipe
</div>
display-recipes.component.ts
import Component, OnInit, Input from '@angular/core';
import SearchRecipeService from '../search-recipe.service';
import RecipeGlobal from '../pojos/RecipeGlobal';
@Component(
selector: 'app-display-recipes',
templateUrl: './display-recipes.component.html',
styleUrls: ['./display-recipes.component.css']
)
export class DisplayRecipesComponent implements OnInit
@Input() calories: String;
@Input() recipe: String;
recipeResult: RecipeGlobal;
constructor(private searchRecipeService: SearchRecipeService)
ngOnInit()
this.recipeResult = new RecipeGlobal();
this.getRecipeInfo();
ngOnChanges()
this.getRecipeInfo();
getRecipeInfo()
this.searchRecipeService.getRecipeInfo().
subscribe(recipeResult => this.recipeResult = recipeResult);
search-recipe.service.ts
import Injectable from '@angular/core';
import HttpClient from '@angular/common/http';
import RecipeGlobal, Recipe from './pojos/RecipeGlobal';
import Observable, of from 'rxjs';
import catchError, map, tap from 'rxjs/operators'
import Component, OnInit, Input from '@angular/core';
@Injectable(
providedIn: 'root'
)
export class SearchRecipeService
constructor(
private http: HttpClient)
private searchUrl = 'https://api.edamam.com/search?q=bandejapaisa&app_id=xxxx&app_key=xxxxxxx&from=0&to=3&calories=591-722&health=alcohol-free';
getRecipeInfo(): Observable<RecipeGlobal>
return this.http.get<RecipeGlobal>(this.searchUrl)
.pipe(
catchError(_ => console.log("error"); return [];)
);
RecipeGlobal.ts -> 为 API 响应映射 mojo
export class RecipeGlobal
q!: String;
hits!: Recipe[];
export class Recipe
image: String;
calories: String;
label: String
API 调用的响应应该是这样的：
"q": "bandeja paisa",
"from": 0,
"to": 3,
"more": false,
"count": 1,
"hits": [
"recipe":
"uri": "http://www.edamam.com/ontologies/edamam.owl#recipe_023ae14ca70ba202bfa5dddfd60564a8",
"label": "Bandeja Paisa",
"image": "https://www.edamam.com/web-img/e7e/e7e5236b4b1c067c881c25004ee9e239.jpg",
"source": "My Recipes",
"url": "http://www.myrecipes.com/recipe/bandeja-paisa",
"shareAs": "http://www.edamam.com/recipe/bandeja-paisa-023ae14ca70ba202bfa5dddfd60564a8/bandeja+paisa/alcohol-free/591-722-cal",
"yield": 4.0,
"dietLabels": [
"Low-Carb"
],
"healthLabels": [
"Sugar-Conscious",
"Peanut-Free",
"Tree-Nut-Free",
"Alcohol-Free"
],
"cautions": [],
"ingredientLines": [
"1 pound skinless pork belly",
"2 teaspoons kosher salt",
"2 teaspoons granulated sugar",
"1/2 teaspoon ground cumin"
],
"ingredients": [
"text": "1 pound skinless pork belly",
"weight": 453.59237
,
"text": "2 teaspoons kosher salt",
"weight": 9.70833333382575
,
"text": "2 teaspoons granulated sugar",
"weight": 8.4
,
"text": "1/2 teaspoon ground cumin",
"weight": 1.05
],
"calories": 2386.0539766,
"totalWeight": 465.4413539831457,
"totalTime": 780.0,
"totalNutrients":
"ENERC_KCAL":
"label": "Energy",
"quantity": 2386.0539766,
"unit": "kcal"
,
"FAT":
"label": "Fat",
"quantity": 240.68315033700003,
"unit": "g"
,
"FASAT":
"label": "Saturated",
"quantity": 87.695522621,
"unit": "g"
,
"FAMS":
"label": "Monounsaturated",
"quantity": 112.18473539000001,
"unit": "g"
,
"FAPU":
"label": "Polyunsaturated",
"quantity": 25.662398405000005,
"unit": "g"
,
"CHOCDF":
"label": "Carbs",
"quantity": 8.86284,
"unit": "g"
,
"FIBTG":
"label": "Fiber",
"quantity": 0.11025,
"unit": "g"
,
"SUGAR":
"label": "Sugars",
"quantity": 8.406825,
"unit": "g"
,
"SUGAR.added":
"label": "Sugars, added",
"quantity": 8.3832,
"unit": "g"
,
"PROCNT":
"label": "Protein",
"quantity": 42.552532358,
"unit": "g"
,
"CHOLE":
"label": "Cholesterol",
"quantity": 326.5865064,
"unit": "mg"
,
"NA":
"label": "Sodium",
"quantity": 1076.7957705876,
"unit": "mg"
,
"CA":
"label": "Calcium",
"quantity": 33.114874655954964,
"unit": "mg"
,
"MG":
"label": "Magnesium",
"quantity": 22.01068463983146,
"unit": "mg"
,
"K":
"label": "Potassium",
"quantity": 858.2798032186518,
"unit": "mg"
,
"FE":
"label": "Iron",
"quantity": 3.0675769711443808,
"unit": "mg"
,
"ZN":
"label": "Zinc",
"quantity": 4.6802811579831465,
"unit": "mg"
,
"P":
"label": "Phosphorus",
"quantity": 495.1192596000001,
"unit": "mg"
,
"VITA_RAE":
"label": "Vitamin A",
"quantity": 14.279771100000001,
"unit": "µg"
,
"VITC":
"label": "Vitamin C",
"quantity": 1.4416271100000002,
"unit": "mg"
,
"THIA":
"label": "Thiamin (B1)",
"quantity": 1.8028197852000003,
"unit": "mg"
,
"RIBF":
"label": "Riboflavin (B2)",
"quantity": 1.1027230354000002,
"unit": "mg"
,
"NIA":
"label": "Niacin (B3)",
"quantity": 21.126516933900003,
"unit": "mg"
,
"VITB6A":
"label": "Vitamin B6",
"quantity": 0.594237581,
"unit": "mg"
,
"FOLDFE":
"label": "Folate equivalent (total)",
"quantity": 4.640923700000001,
"unit": "µg"
,
"FOLFD":
"label": "Folate (food)",
"quantity": 4.640923700000001,
"unit": "µg"
,
"VITB12":
"label": "Vitamin B12",
"quantity": 3.810175908,
"unit": "µg"
,
"TOCPHA":
"label": "Vitamin E",
"quantity": 1.8039752430000002,
"unit": "mg"
,
"VITK1":
"label": "Vitamin K",
"quantity": 0.05670000000000001,
"unit": "µg"
,
"WATER":
"label": "Water",
"quantity": 166.7409447059663,
"unit": "g"
,
"totalDaily":
"ENERC_KCAL":
"label": "Energy",
"quantity": 119.30269883000001,
"unit": "%"
,
"FAT":
"label": "Fat",
"quantity": 370.2817697492308,
"unit": "%"
,
"FASAT":
"label": "Saturated",
"quantity": 438.477613105,
"unit": "%"
,
"CHOCDF":
"label": "Carbs",
"quantity": 2.95428,
"unit": "%"
,
"FIBTG":
"label": "Fiber",
"quantity": 0.441,
"unit": "%"
,
"PROCNT":
"label": "Protein",
"quantity": 85.105064716,
"unit": "%"
,
"CHOLE":
"label": "Cholesterol",
"quantity": 108.8621688,
"unit": "%"
,
"NA":
"label": "Sodium",
"quantity": 44.86649044115,
"unit": "%"
,
"CA":
"label": "Calcium",
"quantity": 3.3114874655954964,
"unit": "%"
,
"MG":
"label": "Magnesium",
"quantity": 5.240639199959872,
"unit": "%"
,
"K":
"label": "Potassium",
"quantity": 18.261272408907484,
"unit": "%"
,
"FE":
"label": "Iron",
"quantity": 17.042094284135448,
"unit": "%"
,
"ZN":
"label": "Zinc",
"quantity": 42.548010527119516,
"unit": "%"
,
"P":
"label": "Phosphorus",
"quantity": 70.73132280000002,
"unit": "%"
,
"VITA_RAE":
"label": "Vitamin A",
"quantity": 1.5866412333333333,
"unit": "%"
,
"VITC":
"label": "Vitamin C",
"quantity": 1.6018079000000003,
"unit": "%"
,
"THIA":
"label": "Thiamin (B1)",
"quantity": 150.23498210000002,
"unit": "%"
,
"RIBF":
"label": "Riboflavin (B2)",
"quantity": 84.82484887692308,
"unit": "%"
,
"NIA":
"label": "Niacin (B3)",
"quantity": 132.040730836875,
"unit": "%"
,
"VITB6A":
"label": "Vitamin B6",
"quantity": 45.71058315384615,
"unit": "%"
,
"FOLDFE":
"label": "Folate equivalent (total)",
"quantity": 1.1602309250000002,
"unit": "%"
,
"VITB12":
"label": "Vitamin B12",
"quantity": 158.7573295,
"unit": "%"
,
"TOCPHA":
"label": "Vitamin E",
"quantity": 12.026501620000001,
"unit": "%"
,
"VITK1":
"label": "Vitamin K",
"quantity": 0.04725000000000001,
"unit": "%"
,
"digest": [
"label": "Fat",
"tag": "FAT",
"schemaOrgTag": "fatContent",
"total": 240.68315033700003,
"hasRDI": true,
"daily": 370.2817697492308,
"unit": "g",
"sub": [
"label": "Saturated",
"tag": "FASAT",
"schemaOrgTag": "saturatedFatContent",
"total": 87.695522621,
"hasRDI": true,
"daily": 438.477613105,
"unit": "g"
,
"label": "Trans",
"tag": "FATRN",
"schemaOrgTag": "transFatContent",
"total": 0.0,
"hasRDI": false,
"daily": 0.0,
"unit": "g"
,
"label": "Monounsaturated",
"tag": "FAMS",
"schemaOrgTag": null,
"total": 112.18473539000001,
"hasRDI": false,
"daily": 0.0,
"unit": "g"
,
"label": "Polyunsaturated",
"tag": "FAPU",
"schemaOrgTag": null,
"total": 25.662398405000005,
"hasRDI": false,
"daily": 0.0,
"unit": "g"
]
,
"label": "Carbs",
"tag": "CHOCDF",
"schemaOrgTag": "carbohydrateContent",
"total": 8.86284,
"hasRDI": true,
"daily": 2.95428,
"unit": "g",
"sub": [
"label": "Carbs (net)",
"tag": "CHOCDF.net",
"schemaOrgTag": null,
"total": 8.75259,
"hasRDI": false,
"daily": 0.0,
"unit": "g"
,
"label": "Fiber",
"tag": "FIBTG",
"schemaOrgTag": "fiberContent",
"total": 0.11025,
"hasRDI": true,
"daily": 0.441,
"unit": "g"
,
"label": "Sugars",
"tag": "SUGAR",
"schemaOrgTag": "sugarContent",
"total": 8.406825,
"hasRDI": false,
"daily": 0.0,
"unit": "g"
,
"label": "Sugars, added",
"tag": "SUGAR.added",
"schemaOrgTag": null,
"total": 8.3832,
"hasRDI": false,
"daily": 0.0,
"unit": "g"
]
,
"label": "Protein",
"tag": "PROCNT",
"schemaOrgTag": "proteinContent",
"total": 42.552532358,
"hasRDI": true,
"daily": 85.105064716,
"unit": "g"
,
"label": "Cholesterol",
"tag": "CHOLE",
"schemaOrgTag": "cholesterolContent",
"total": 326.5865064,
"hasRDI": true,
"daily": 108.8621688,
"unit": "mg"
,
"label": "Sodium",
"tag": "NA",
"schemaOrgTag": "sodiumContent",
"total": 1076.7957705876,
"hasRDI": true,
"daily": 44.86649044115,
"unit": "mg"
,
"label": "Calcium",
"tag": "CA",
"schemaOrgTag": null,
"total": 33.114874655954964,
"hasRDI": true,
"daily": 3.3114874655954964,
"unit": "mg"
,
"label": "Magnesium",
"tag": "MG",
"schemaOrgTag": null,
"total": 22.01068463983146,
"hasRDI": true,
"daily": 5.240639199959872,
"unit": "mg"
,
"label": "Potassium",
"tag": "K",
"schemaOrgTag": null,
"total": 858.2798032186518,
"hasRDI": true,
"daily": 18.261272408907484,
"unit": "mg"
,
"label": "Iron",
"tag": "FE",
"schemaOrgTag": null,
"total": 3.0675769711443808,
"hasRDI": true,
"daily": 17.042094284135448,
"unit": "mg"
,
"label": "Zinc",
"tag": "ZN",
"schemaOrgTag": null,
"total": 4.6802811579831465,
"hasRDI": true,
"daily": 42.548010527119516,
"unit": "mg"
,
"label": "Phosphorus",
"tag": "P",
"schemaOrgTag": null,
"total": 495.1192596000001,
"hasRDI": true,
"daily": 70.73132280000002,
"unit": "mg"
,
"label": "Vitamin A",
"tag": "VITA_RAE",
"schemaOrgTag": null,
"total": 14.279771100000001,
"hasRDI": true,
"daily": 1.5866412333333333,
"unit": "µg"
,
"label": "Vitamin C",
"tag": "VITC",
"schemaOrgTag": null,
"total": 1.4416271100000002,
"hasRDI": true,
"daily": 1.6018079000000003,
"unit": "mg"
,
"label": "Thiamin (B1)",
"tag": "THIA",
"schemaOrgTag": null,
"total": 1.8028197852000003,
"hasRDI": true,
"daily": 150.23498210000002,
"unit": "mg"
,
"label": "Riboflavin (B2)",
"tag": "RIBF",
"schemaOrgTag": null,
"total": 1.1027230354000002,
"hasRDI": true,
"daily": 84.82484887692308,
"unit": "mg"
,
"label": "Niacin (B3)",
"tag": "NIA",
"schemaOrgTag": null,
"total": 21.126516933900003,
"hasRDI": true,
"daily": 132.040730836875,
"unit": "mg"
,
"label": "Vitamin B6",
"tag": "VITB6A",
"schemaOrgTag": null,
"total": 0.594237581,
"hasRDI": true,
"daily": 45.71058315384615,
"unit": "mg"
,
"label": "Folate equivalent (total)",
"tag": "FOLDFE",
"schemaOrgTag": null,
"total": 4.640923700000001,
"hasRDI": true,
"daily": 1.1602309250000002,
"unit": "µg"
,
"label": "Folate (food)",
"tag": "FOLFD",
"schemaOrgTag": null,
"total": 4.640923700000001,
"hasRDI": false,
"daily": 0.0,
"unit": "µg"
,
"label": "Folic acid",
"tag": "FOLAC",
"schemaOrgTag": null,
"total": 0.0,
"hasRDI": false,
"daily": 0.0,
"unit": "µg"
,
"label": "Vitamin B12",
"tag": "VITB12",
"schemaOrgTag": null,
"total": 3.810175908,
"hasRDI": true,
"daily": 158.7573295,
"unit": "µg"
,
"label": "Vitamin D",
"tag": "VITD",
"schemaOrgTag": null,
"total": 0.0,
"hasRDI": false,
"daily": 0.0,
"unit": "µg"
,
"label": "Vitamin E",
"tag": "TOCPHA",
"schemaOrgTag": null,
"total": 1.8039752430000002,
"hasRDI": true,
"daily": 12.026501620000001,
"unit": "mg"
,
"label": "Vitamin K",
"tag": "VITK1",
"schemaOrgTag": null,
"total": 0.05670000000000001,
"hasRDI": true,
"daily": 0.04725000000000001,
"unit": "µg"
,
"label": "Sugar alcohols",
"tag": "Sugar.alcohol",
"schemaOrgTag": null,
"total": 0.0,
"hasRDI": false,
"daily": 0.0,
"unit": "g"
,
"label": "Water",
"tag": "WATER",
"schemaOrgTag": null,
"total": 166.7409447059663,
"hasRDI": false,
"daily": 0.0,
"unit": "g"
]
,
"bookmarked": false,
"bought": false
]
我只是通过使用上面提到的 POJO 类来解析响应中的一些元素。我看到该组件正在从父组件正确加载，但由于未进行 API 调用，因此未在 div 内显示数据。我看到控制台中显示了错误日志，但 API 调用未显示在网络选项卡中。
【问题讨论】：
你的响应类型和类定义完全不同。您是否将原始响应映射（转换）到某个地方的类定义？ @ShadabFaiz 没有。那是唯一的地方。我希望在服务方法中正确解析响应。然后我从 subscribe 内部的组件方法中获取它。 【参考方案1】：您对 typescript 中的类有一些误解。打字稿中的类并不是什么魔法。您只定义了类并期望角度自动将原始响应映射到实际的类结构。他们没有。您必须手动将原始响应映射到实际的类定义结构。
getRecipeInfo(): Observable<RecipeGlobal>
return this.http.get<RecipeGlobal>(this.searchUrl)
.pipe(
map(res => this.mapRawResponse(res))
catchError(_ => console.log("error"); return [];)
);
private mapRawResponse(rawResponse): RecipeGlobal
//... your code to map the response to Recipe.
如果您不想映射响应，请更改类定义的结构以匹配原始响应。
至于“网络”选项卡中未显示 API 调用，请检查其上的过滤器，您可能会使用一些过滤器（css/Img/Media/etc）。切换到 xhr/All 即可查看。
更新为适当的类 改用这个类来获得类型支持：
export interface RecipeGlobal
q: string;
from: number;
to: number;
more: boolean;
count: number;
hits: Hit[];
export interface Hit
recipe: Recipe;
bookmarked: boolean;
bought: boolean;
export interface Recipe
uri: string;
label: string;
image: string;
source: string;
url: string;
shareAs: string;
yield: number;
dietLabels: string[];
healthLabels: string[];
cautions: any[];
ingredientLines: string[];
ingredients: Ingredient[];
calories: number;
totalWeight: number;
totalTime: number;
totalNutrients: [key: string]: Total ;
totalDaily: [key: string]: Total ;
digest: Digest[];
export interface Digest
label: string;
tag: string;
schemaOrgTag: null | string;
total: number;
hasRDI: boolean;
daily: number;
unit: Unit;
sub?: Digest[];
export enum Unit
Empty = "%",
G = "g",
Kcal = "kcal",
Mg = "mg",
Μg = "µg",
export interface Ingredient
text: string;
weight: number;
export interface Total
label: string;
quantity: number;
unit: Unit;
【讨论】：
嗨沙巴德。当您说类定义时，您的意思是改变 pojo 的结构以匹配原始响应吗？而且我还在控制台中看到错误日志。 通过类定义，我的意思是您如何构建Recipe 和RecipeGlobal 的属性。我会用适当的结构更新我的答案。你可以用那个。至于日志错误，那些错误是什么？ 万一发生了什么事，我把那个错误放在 catchError 块中。我假设如果请求成功，则不会执行 catch 错误块，并且关于网络选项卡，即使我切换到全部，API 调用也不存在。 在这一行，this.recipeResult = new RecipeGlobal()，我得到了。 RecipeGlobal 仅引用一个类型，但被用作一个值。 实际上 O 现在遇到了不同的错误。我在控制台日志中收到 404，并且呼叫未显示在网络选项卡中。该请求虽然来自邮递员。这是一个没有标头的获取请求，只有 URL。以上是关于未进行 API 调用，因为它未反映在 Google chrome 开发人员工具的网络选项卡中的主要内容，如果未能解决你的问题，请参考以下文章
TypeError：无法解构“对象（...）（...）”的属性“setValues”，因为它未定义。 （反应/创建反应应用）
反应使用上下文。无法解构“对象（...）（...）”的属性“currentChatbotInEdit”，因为它未定义。我该如何解决？
从 Vue CLI（Vue 3）迁移到 Vite：未捕获（承诺中）类型错误：无法解构“未定义”的属性“默认”，因为它未定义