Javascript Can'；无法使用搜索栏获取API结果

我试图从搜索栏中获取用户的输入，并使用它从鸡尾酒API中获取饮料信息，但我无法返回结果。 如果我使用一个实值，例如Margarita，而不是我的查询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);
    } 
});

让鸡尾酒={}；
const searchByName=（drinkName）=>{
取回(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${drinkName}`）
.那么(
功能（响应）{
如果（response.status！==200）{
console.log（'看起来有问题。状态代码：'+
答复（现状）；
返回数据；
}
response.json（）.then（函数（数据）{
控制台日志（数据）；
getDrinkName（数据）；
（数据）；
获取方向（数据）；
获取图像（数据）；
（数据）；
控制台日志（鸡尾酒）；
});
}
)
.catch（函数（err）{
log（'Fetch Error:-S'，err）；
});
}
常量getImage=（数据）=>{
const imageUrl=（data.drinks[0].strDrinkThumb）；
返回imageUrl；
}
常量getDrinkName=（数据）=>{
const name=（data.drinks[0].strDrink）；
返回名称；
}
常量getComponents=（数据）=>{
让IngreditList=[]；
for（设i=1；i<16；i++）{
if（data.drinks[0][`StringCredit${i}`]==null）{
打破
}否则{
常量成分=（（data.drinks[0][`strMeasure${i}`]）+：'+data.drinks[0][`stringredent${i}`]）；
IngCreditList.push（配料）；
}
}
返回用户列表；
}
常量getDirections=（数据）=>{
构造方向=（data.drinks[0].strInstructions）；
返回方向；
}
const buildcocktack=（数据）=>{
cockbox.image=getImage（数据）；
cockbox.name=getDrinkName（数据）；
鸡尾酒成分=获取成分（数据）；
cockbox.directions=getDirections（数据）；
控制台日志（鸡尾酒）；
}
$（“#搜索”）。按键（功能（事件）{
if（event.which==13）{
const drinkName=$（'#search'）.val（）；
console.log（drinkName）；
searchByName（drinkName）；
控制台日志（鸡尾酒）；
} 
});

在启动Ajax调用后立即记录

鸡尾酒

变量不会返回结果，因为这是一个异步操作。所有其他的console.log是否显示了正确的数据？它应该通过searchbyname函数中的console.log，看看是否有一些额外的空格，如果您得到了正确的单词，那么在启动Ajax调用后立即记录

鸡尾酒

变量不会返回结果，因为这是一个异步操作。是否所有其他console.log都显示了正确的数据？它应该传递到searchbyname函数中的console.log，并查看是否有一些额外的空格以及是否得到了正确的单词