如何在事件监听器中获取Async/Await返回的API数据？

问题根源 #

1. 事件监听器的回调函数参数由浏览器自动传递，第一个参数是事件对象，不存在自定义的第二个data参数，所以你写的function(event, data)里的data必然是undefined。
2. const data = getData().then(data => data);这段代码中，data实际上是一个Promise实例，不是API返回的实际数据，直接在事件监听器里使用它也无法拿到有效数据。

解决方案 #

方案一：提前获取数据，再绑定事件监听器

页面加载时先完成API请求，拿到数据后再给表单绑定提交事件，确保触发提交时数据已经就绪：

async function getData() {
    const urlValue = parseInt(getUrlParameter('tm'), 10);
    const response = await fetch(`/core/nav?productGroupId=${urlValue}`);
    const data = await response.json();
    return data;
}

// 先获取API数据，再绑定提交事件
getData().then(apiData => {
    document.getElementById('sign-in-form').addEventListener('submit', function (event) {
        event.preventDefault();
        if (apiData.ratings) {
            createCookie('userReferrer', apiData.ratings);
        }
        this.submit();
    });
});

方案二：提交时实时获取数据

如果需要在用户点击提交时才获取最新数据，可以把事件回调改成async函数，等待API响应后再处理提交：

async function getData() {
    const urlValue = parseInt(getUrlParameter('tm'), 10);
    const response = await fetch(`/core/nav?productGroupId=${urlValue}`);
    const data = await response.json();
    return data;
}

document.getElementById('sign-in-form').addEventListener('submit', async function (event) {
    event.preventDefault();
    try {
        const apiData = await getData();
        if (apiData.ratings) {
            createCookie('userReferrer', apiData.ratings);
        }
        this.submit();
    } catch (error) {
        // 处理API请求失败的情况，避免表单无法提交
        console.error('获取数据失败:', error);
        this.submit();
    }
});

注意事项 #

• 确保getUrlParameter（获取URL参数）和createCookie（创建Cookie）这两个辅助函数已经正确定义，否则会影响功能执行。
• 方案二会增加表单提交的等待时间，建议添加加载提示提升用户体验；同时必须处理API请求失败的异常，避免用户无法提交表单。

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