javascript - 无法使用搜索栏获取 API 结果

Question

我正在尝试从搜索栏中获取用户的输入，并使用它从鸡尾酒 API 中获取饮料信息，但我没有返回结果。例如，如果我在查询 URL 中使用真实值而不是占位符 ${drinkName}，我会在我正在寻找的对象形式中获得我正在寻找的数据，但是关于我的情况获取/使用用户输入是错误的。当我控制台记录drinkName时，我确实从控制台中的搜索中获取了用户的输入，但它似乎没有将其传递给searchByName函数，并且在searchByName函数返回我的空鸡尾酒对象后控制台记录鸡尾酒。

let cocktail = {};

const searchByName = (drinkName) => {
    fetch(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${drinkName}`)
    .then(
        function(response) {
        if (response.status !== 200) {
            console.log('Looks like there was a problem. Status Code: ' +
            response.status);
            return data;
            
        }
        response.json().then(function(data) {
            console.log(data);
            getDrinkName(data);
            getIngredients(data);
            getDirections(data);
            getImage(data);
            buildCocktail(data);
            console.log(cocktail);
        });
        }
    )
    .catch(function(err) {
        console.log('Fetch Error :-S', err);
    });
}

const getImage = (data) => {
    const imageUrl = (data.drinks[0].strDrinkThumb);
    return imageUrl;
}

const getDrinkName = (data) => {
    const name = (data.drinks[0].strDrink);  
    return name;
}

const getIngredients = (data) => {
    let ingredientList = [];
    for (let i = 1; i < 16; i++) {
        if (data.drinks[0][`strIngredient${i}`] == null){
            break;
        } else {
            const ingredients = ((data.drinks[0][`strMeasure${i}`]) + ': ' + data.drinks[0][`strIngredient${i}`]);
            ingredientList.push(ingredients);
        }
    }
    return ingredientList;
}

const getDirections = (data) => {
    const directions = (data.drinks[0].strInstructions);
    return directions;
}

const buildCocktail = (data) => {
    cocktail.image = getImage(data);
    cocktail.name = getDrinkName(data);
    cocktail.ingredients = getIngredients(data);
    cocktail.directions = getDirections(data);
    console.log(cocktail);    
}

$("#search").keypress(function(event) {
    if (event.which === 13) {
        const drinkName = $('#search').val();
        console.log(drinkName);
        searchByName(drinkName);      
        console.log(cocktail);
    } 
});

标签： javascriptfunctionapisearchsearchbar