EventListener回调中函数未异步执行，提交按钮需点击两次才生效

问题原因 #

fetch 属于异步网络请求API，getValues 执行后不会等待接口返回结果，会直接执行后续的valuesToChange函数，此时表单输入值还没有被接口返回的新数据覆盖，所以第一次点击时汇总计算使用的是旧值，只有第二次点击时，前一次请求已经完成并更新了表单值，才能得到正确结果。

修复方案 #

方案1：等待异步请求完成后再执行汇总计算 #

只需要修改提交按钮的点击回调逻辑即可，两种写法二选一：

async/await写法（推荐，可读性更高）

mySubmit.addEventListener('click', async () => {
  // 等待API请求完成、表单值更新后再执行计算
  await getValues(0);
  valuesToChange();
});

Promise.then写法

mySubmit.addEventListener('click', () => {
  getValues(0).then(() => {
    valuesToChange();
  });
});

方案2：复用已有keyup事件逻辑（可选优化） #

如果后续需要适配多输入框的批量更新，可以在修改输入值后手动触发keyup事件，不用单独调用计算函数，修改getValues逻辑即可：

const getValues = APIIndex =>
  fetch('https://api.com')
    .then(response => response.json())
    .then(json => {
      formInput.value = `${parseFloat(json.prop[APIIndex].price).toFixed(2)}`;
      // 手动触发keyup事件，复用原有绑定的计算逻辑
      formInput.dispatchEvent(new Event('keyup'));
    })
    .catch(error => console.log('Error'));

修改完成后点击一次按钮即可完成接口拉取、数值更新、汇总计算全流程，和用户手动输入的效果完全一致。

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