如何使用Fetch在POST请求完成后实现页面重定向？

你的代码有三个关键问题导致重定向失败：

• 第一个.then回调仅打印响应文本，未返回该值，后续.then无法获取重定向地址
• 第二个.then的写法错误：直接赋值window.location.href不是合法的回调函数写法，且无法访问前一个回调里的response变量
• 未处理请求失败的情况，出错时无法排查问题

修复后的代码 #

const formEl = document.querySelector("form");
formEl.addEventListener("submit", (event) => {
  event.preventDefault();
  const formData = new FormData(formEl);
  const data = new URLSearchParams(formData);

  fetch("https://example.com/users", {
    method: "POST",
    body: data
  })
  // 获取响应文本并传递给下一个回调
  .then(async response => {
    const redirectUrl = await response.text();
    console.log(redirectUrl); // 保留调试日志
    return redirectUrl;
  })
  // 拿到地址后执行重定向
  .then(redirectUrl => {
    window.location.href = redirectUrl;
  })
  // 处理请求失败场景
  .catch(error => {
    console.error("表单提交失败：", error);
  });
});

额外注意事项 #

如果你的API返回的是JSON格式（例如{"redirect": "https://target-url.com"}），需要把response.text()替换为response.json()，并调整取值逻辑：

.then(async response => {
  const result = await response.json();
  return result.redirect; // 替换为API实际返回的字段名
})

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