使用Async Fetch发送POST请求后如何确保请求完成再关闭窗口

你当前代码的问题出在then的传参逻辑：then方法要求传入回调函数作为参数，你直接写window.close()会立刻执行关闭窗口的逻辑，再把执行返回的undefined传递给then，自然会出现请求还未完成窗口就被关闭的情况。

方案1：调整then参数写法 #

将关闭逻辑包裹在匿名函数中传入then，同时补充错误捕获逻辑，避免请求报错时窗口无法关闭：

async function postData() {
    const response = await fetch(destinationUrl, fetchOptions);
    return response.json();
}

postData()
  .then(() => window.close())
  .catch(() => window.close());

如果只需要请求成功时才关闭窗口，删除catch段即可。

方案2：统一使用async/await语法，逻辑更直观 #

把调用逻辑也放入异步函数中，等待请求完成后再执行关闭：

async function postData() {
    const response = await fetch(destinationUrl, fetchOptions);
    return response.json();
}

async function handlePostAndClose() {
  try {
    await postData();
    // 仅请求成功时关闭写在这里
    window.close();
  } catch (err) {
    // 请求报错时的处理逻辑，需要的话也可以在这里加关闭
  }
}

handlePostAndClose();

如果无论请求成功失败都要关闭窗口，可以把window.close()放在finally代码块中。

可选优化方案（仅上报类请求适用） #

如果你的请求不需要处理服务端返回结果，只是要把数据发送给服务端，可以使用浏览器内置的navigator.sendBeaconAPI，这个API原生保证页面卸载前也能完成请求发送，写法更简单：

// 第二个参数为要发送的数据，支持FormData、Blob、字符串等类型
navigator.sendBeacon(destinationUrl, postData);
window.close();

内容的提问来源于stack exchange，提问作者Newb 4 You BB