我想使用 HTML 多檔案輸入并保存到 CLoudant。當我這樣做時，代碼在處理檔案以準備發送之前完成。另外，我發現處理的每個檔案在 base64 中看起來都一樣。
我嘗試了幾種方法，并且一直在研究 Promise。仍然無法使操作順序起作用。
在下面的代碼中：
HTML 使用多個檔案輸入到 "fileName" console.log "doc1" 和 "doc2" 在 console.log "blob" 之前運行
function sendFile() {
var doc = {};
doc._attachments = {};
doc._id = "testing::" new Date().getTime();
doc.type = "testing attachment";
var blob = null;
var url = fileName;
url._rawValue.forEach(function (item) {
console.log("item: ", item);
fetch(item)
.then((r) => r.blob())
.then((b) => {
blob = b;
console.log("blob: ", blob);
return getBase64(blob);
})
.then((blob2) => {
console.log(blob2);
let name = item.name;
doc._attachments[name] = {};
doc._attachments[name].content_type = item.type;
doc._attachments[name].data = blob2.split(",")[1];
});
console.log("doc1: ", doc);
});
let doc2 = doc;
console.log("doc2: ", doc2);
api({
method: "POST",
url: "/webdata",
data: doc,
})
.then((response) => {
console.log("result: ", response);
alert("Test has been submitted!");
})
.catch((e) => {
console.log("e: ", e);
alert(e);
});
console.log("finished send test");
}
uj5u.com熱心網友回復：
有幾個問題。首先，.forEach()不知道承諾，因此它只會運行完成而無需等待您的任何異步操作完成。其次，您有多個未鏈接在一起的異步操作。因此，即使回圈的單次迭代也不是按順序運行的。
這里最簡單的事情是使用 async/await，這樣您就可以對異步操作進行排序：
async function sendFile() {
try {
const url = fileName;
const doc = {};
doc._attachments = {};
doc._id = "testing::" new Date().getTime();
doc.type = "testing attachment";
for (let item of url._rawValue) {
console.log("item: ", item);
const r = await fetch(item);
const blob = await r.blob();
console.log("blob: ", blob);
const blob2 = getBase64(blob);
console.log(blob2);
let name = item.name;
doc._attachments[name] = {};
doc._attachments[name].content_type = item.type;
doc._attachments[name].data = blob2.split(",")[1];
console.log("doc1: ", doc);
}
const response = await api({
method: "POST",
url: "/webdata",
data: doc,
});
console.log("result: ", response);
} catch (e) {
console.log(e);
throw e; // throw error so caller can see the error
}
console.log("finished send test");
}
您也可以像這樣并行運行它們，因為回圈中的所有專案似乎都不依賴于先前的專案。這里的一個危險是，如果url._rawValue是一個大型陣列，您可能會一次用太多請求壓倒目標服務器。這顯然取決于您的資料大小和目標服務器。如果您不知道目標服務器的限制或陣列可能很大，則串行運行它們（上面的代碼塊）是一個更安全的選擇：
async function sendFile() {
try {
const url = fileName;
const doc = {};
doc._attachments = {};
doc._id = "testing::" new Date().getTime();
doc.type = "testing attachment";
await Promise.all(url._rawValue.map(async item => {
console.log("item: ", item);
const r = await fetch(item);
const blob = await r.blob();
console.log("blob: ", blob);
const blob2 = getBase64(blob);
console.log(blob2);
let name = item.name;
doc._attachments[name] = {};
doc._attachments[name].content_type = item.type;
doc._attachments[name].data = blob.split(",")[1];
console.log("doc1: ", doc);
}));
const response = await api({
method: "POST",
url: "/webdata",
data: doc,
});
console.log("result: ", response);
} catch (e) {
console.log(e);
throw e; // throw error so caller can see the error
}
console.log("finished send test");
}
注釋/問題：
- 您分配的原始代碼
doc2與 相同doc，但也沒有使用它，因此我將其洗掉。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/490132.html
標籤：javascript 异步 异步等待 承诺