如何在HTML元素事件中让location.reload()在fetch_post执行后运行？

问题根源 #

fetch是异步API，当前fetch_post函数没有等待请求完成就直接结束，导致location.reload()会和请求同步执行，还没等请求提交完成就刷新了页面。

具体修改步骤 #

1. 修改fetch_post函数，返回Promise

让函数返回fetch调用生成的Promise对象，这样外部可以监听请求的完成状态：

// Send AJAX request to route
function fetch_post(key, ...values){
    const formData = new FormData();
    for (let value of values){
        formData.append(key, value)
    }
    // 返回fetch的Promise，以便外部监听完成事件
    return fetch('/settings', {
        method: 'post',
        body: formData
    });
}

2. 修改onchange绑定的代码

利用Promise的.then()方法，在请求成功完成后再执行页面重载：

onchange="fetch_post(this.name, this.value).then(() => location.reload());"

可选：处理请求失败的情况

如果需要在请求失败时给出提示而不是直接刷新，可以扩展代码：

onchange="fetch_post(this.name, this.value)
  .then(response => {
    if (response.ok) {
      location.reload();
    } else {
      alert('设置保存失败，请重试');
    }
  })
  .catch(err => {
    console.error('请求出错:', err);
    alert('网络异常，请稍后再试');
  });"

另一种写法：使用async/await

也可以用async/await语法让代码更直观，需要把onchange里的逻辑包装成异步函数：

onchange="(async function() {
  try {
    const response = await fetch_post(this.name, this.value);
    if (response.ok) {
      location.reload();
    } else {
      alert('设置保存失败');
    }
  } catch (err) {
    console.error(err);
    alert('网络出错');
  }
})();"

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