同步从 DataTransferItem 中提取值 - 我在这里做什么（错误）？

Question

我有一个用于 drop 事件的处理函数，它看起来像这样：

da.addEventListener("drop", function(e) {
    e.stopPropagation();
    var xhr = new XMLHttpRequest();
    ... (configure XMLHttpRequest) 
    var fd = new FormData();
    [...e.dataTransfer.items].forEach(it => {
      it.getAsString(value => {
        console.log(`append ${it.type} ${value}`);
        fd.append(`${it.type}`, value);
      });
    });
    console.log("send");
    xhr.send(fd);
});

这里的问题是 send() 在 fd.append() 之前发生>，因为 it.getAsString() 似乎是异步的。

在阅读了一些有关回调、异步函数、promise 等的文章后，我尝试在 .then() 块中进行实际的附加操作：

it.getAsString(value => {
  return value;
}).then(value => {
  console.log(`append ${it.type} ${value}`);
  fd.append(`${it.type}`, value);
});

我预计会遇到 value 的麻烦没有被正确传播，但我得到了

Uncaught TypeError: it.getAsString(...) is undefined

，甚至集成调试器也强调了getAsString。

我在这里做什么？为什么当我在不附加 .then(value => {}) 的情况下使用它时，似乎定义了 getAsString ，但在没有 .then() 的情况下却可以正常工作>？

在更抽象的层面上 - 在发送之前如何正确地将 items 从 DataTransferItem 添加到 FormData 实例？

更新

结合迭代 .items 然后使用 .getData() 对我有用，但感觉不对。

[...e.dataTransfer.items].forEach(it => {
  fd.append(`${it.type}`, e.dataTransfer.getData(it.type));
});