为什么我对（this.ingredients）没有定义？

Question

I am trying to log the ingredients to the console but it is always undefined

export default class Recipe {
    constructor(ID) {
        this.ID = ID;
    }

    getRicepeById () {
        const res = await fetch(`https://www.food2fork.com/api/get?key=${key}&rId=${this.ID}`);
        this.title = res.data.recipe.title;
        this.image = res.data.recipe.image_url;
        this.author = res.data.recipe.publisher;
        this.ingredients = res.data.recipe.ingredients; 
        //this.ingredients = [1, 2, 3, 4, 4, 23, 2];
    }

    calculateTime() {
        const totalIngredients = this.ingredients;
        //here is my problem
        console.log(totalIngredients)
    }
}

Answer 1

getRicepeById should be async because you use await in the body of this method. Also, make sure you are calling calculateTime after fetch completed

Answer 2

and you have to read the fetched data as follow:

 class Recipe { constructor(ID) { this.ID = ID; } async getRecipeById () { const res = await fetch(`https://api.myjson.com/bins/jta0q`); res.json().then(data => { this.ingredients = data; this.calculateTime(); }); } calculateTime() { const totalIngredients = this.ingredients; console.log(totalIngredients) } } let recipe = new Recipe(); recipe.getRecipeById();