时间戳

首页 > 解决方案 > 使用 Fetch 提交多个 formData 对象

javascript - 使用 Fetch 提交多个 formData 对象

问题描述

我正在创建一个竞赛表格，用户可以在其中提交多个代码。每个代码都是一个新条目

目前，我正在遍历每个代码，扩充formData对象，然后使用 fetch 将其发送出去。但是，这看起来很混乱——而且我也无法轻松检查它是成功还是失败（我想这样做以更改 HTML 视图）。

如何将这些组合到一个 fetch 执行中，然后清楚地查看它是失败还是成功？

//loop through codes and submit one entry each.
let codes = document.querySelectorAll(".code-row");

for (var i = 0; i < codes.length; i++) {
  let uniqueCode = codes[i].querySelector('input').value;
  let currentSubmission = new FormData(form);

  currentSubmission.set('code', uniqueCode);
  console.log('processing entry ' + i);

  fetch(scriptURL, { method: "POST", body: currentSubmission })
  .then((response) => console.log("Success!", response))
  .catch((error) => console.error("Error!", error.message));
}

标签： javascriptformsfetch

解决方案

虽然我认为您不能在一篇文章中发送多个 formData 对象，但您可以使用Promise.all(). 这是我修改后的代码：

let codes = document.querySelectorAll(".code-row");
const promises = [];

for (var i = 0; i < codes.length; i++) {
  let uniqueCode = codes[i].querySelector('input').value;
  let currentSubmission = new FormData(form);

  currentSubmission.set('code', uniqueCode);

  let promise = fetch(scriptURL, { method: "POST", body: currentSubmission });
  promises.push(promise);
}

Promise.all(promises).then((response) => console.log("Success!", response))
.catch((error) => console.error("Error!", error.message))

推荐阅读