JavaScript：点击按钮后如何获取async函数的返回值并打印？

方法一：用.then()处理Promise结果 #

async函数默认返回Promise对象，你可以通过.then()方法提取它最终resolve的值：

const btn = document.querySelector("button");
const getDadJoke = async () => {
    const config = { headers: { Accept: "application/json" } }
    // 给res添加const声明，避免全局变量污染
    const res = await axios.get("https://icanhazdadjoke.com", config);
    return res.data.joke;
}

btn.addEventListener("click", () => {
    getDadJoke().then(joke => {
        console.log(joke);
    });
})

方法二：将事件回调改为async函数，用await等待结果 #

事件监听的回调可以是async函数，这样就能直接在内部用await获取getDadJoke()的返回值：

const btn = document.querySelector("button");
const getDadJoke = async () => {
    const config = { headers: { Accept: "application/json" } }
    const res = await axios.get("https://icanhazdadjoke.com", config);
    return res.data.joke;
}

btn.addEventListener("click", async () => {
    const joke = await getDadJoke();
    console.log(joke);
})

关于你第二次尝试的修正 #

你第二次的代码除了没调用getDadJoke()，还有异步时序问题：网络请求是异步操作，直接打印text会在请求完成前执行，拿到的还是初始值。修正后可以这样写：

const btn = document.querySelector("button");
let text = "original text"

const getDadJoke = async () => {
    const config = { headers: { Accept: "application/json" } }
    const res = await axios.get("https://icanhazdadjoke.com", config);
    text = res.data.joke;
}

btn.addEventListener("click", async () => {
    await getDadJoke(); // 等待请求完成，确保text已更新
    console.log(text);
})

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