JavaScript异步函数引发变量undefined问题求助

Hey there! I totally get why this is tripping you up—async functions can feel like a curveball when you're just starting out with frontend development. Let's break down what's happening and how to fix it.

Why You're Getting undefined #

The core issue here is that getNameID() and getTypeID() are asynchronous functions. Unlike regular functions, they don't return the actual ID value immediately. Instead, they hand back a Promise object that will eventually resolve to your desired data. When you assign var thisNameID = getNameID(nameInput);, you're storing that unresolved Promise (not the final ID) in the variable—so when you try to use it later, it's not the value you expect, hence undefined.

Solution 1: Use async/await (Cleanest, Most Readable Approach) #

You can convert your click handler into an async function, then use the await keyword to pause execution until each async call finishes and returns its value. Here's how to adjust your code:

document.getElementById("applyButton").addEventListener("click", async () => {
    // 表单输入变量
    var nameInput = document.getElementById("nameID").value;
    var typeInput = document.getElementById("typeID").value;
    
    // 等待异步查询完成，拿到实际的ID值
    var thisNameID = await getNameID(nameInput);
    var thisTypeID = await getTypeID(typeInput);
    
    // 后续逻辑（现在可以正常使用thisNameID和thisTypeID了）
    console.log("Fetched IDs:", thisNameID, thisTypeID);
});

Just double-check that getNameID and getTypeID are set up to return a Promise. For example, if they use fetch to talk to a database, they might look like this:

function getNameID(name) {
    return fetch(`/api/get-name-id?name=${name}`)
        .then(response => response.json())
        .then(data => data.id);
}

Solution 2: Use Promise.then() (Alternative for Explicit Flow Control) #

If you want to stick with Promise chaining (or need support for older environments), you can use Promise.all() to run both async calls in parallel (saving time) and handle their results together:

document.getElementById("applyButton").addEventListener("click", () => {
    var nameInput = document.getElementById("nameID").value;
    var typeInput = document.getElementById("typeID").value;
    
    // 并行执行两个异步查询
    Promise.all([getNameID(nameInput), getTypeID(typeInput)])
        .then(([thisNameID, thisTypeID]) => {
            // 后续逻辑在这里执行，此时两个ID都已成功获取
            console.log("Fetched IDs:", thisNameID, thisTypeID);
        })
        .catch(error => {
            // 别忘了处理可能出现的错误（比如网络问题）
            console.error("Failed to fetch IDs:", error);
        });
});

Quick Reminder #

Async operations don't block your code from running—so you have to explicitly wait for them to finish before using their results. async/await makes this feel like synchronous code, while Promise.then() gives you clear control over the order of operations.

内容的提问来源于stack exchange，提问作者Runberg