javascript - 然后 Vs Await 问题
问题描述
您不必阅读代码,正在发生的事情是一个文件一次上传 1000 个字节。并确保我们按使用的顺序发送字节await
。如果我想使用.then()
,这似乎很难,因为 fetch 调用周围有一个循环。
const fileReader = new FileReader();
const theFile = f.files[0];
fileReader.onload = async (ev) => {
const CHUNK_SIZE = 5000;
const chunkCount = ev.target.result.byteLength / CHUNK_SIZE;
console.log("Read successfully");
const fileName = Math.random() * 1000 + theFile.name;
for (let chunkId = 0; chunkId < chunkCount + 1; chunkId++) {
const chunk = ev.target.result.slice(
chunkId * CHUNK_SIZE,
chunkId * CHUNK_SIZE + CHUNK_SIZE
);
await fetch("http://localhost:8080/upload", {
method: "POST",
headers: {
"content-type": "application/octet-stream",
"content-length": chunk.length,
"file-name": fileName,
},
body: chunk,
});
divOutput.textContent =
Math.round((chunkId * 100) / chunkCount, 0) + "%";
}
console.log(ev.target.result.byteLength);
};
fileReader.readAsArrayBuffer(theFile);
});
解决方案
这是没有await
. 它取代了for
循环:
const uploadChunk = (chunkId = 0) => {
const chunk = ev.target.result.slice(
chunkId * CHUNK_SIZE,
chunkId * CHUNK_SIZE + CHUNK_SIZE
);
fetch("http://localhost:8080/upload", {
method: "POST",
headers: {
"content-type": "application/octet-stream",
"content-length": chunk.length,
"file-name": fileName,
},
body: chunk,
}).then(() => {
divOutput.textContent =
Math.round((chunkId * 100) / chunkCount, 0) + "%";
(chunkId <= chunkCount) && uploadChunk(chunkId + 1);
});
}
uploadChunk();
推荐阅读
- python - 仅过去一年的网络抓取评论
- sql-server - 在开发服务器上,我从那天开始分离一个数据库并附加到另一个驱动器,日志大小成倍增加?
- javascript - Expo / React Native:视频无法调整大小
- javascript - 无法在浏览器中显示图像。在画布标签中动态添加。但能够在检查元素中看到
- javascript - React:地图渲染组件导致不必要的重新渲染,子键道具不起作用?
- error-handling - 如何使用 $util.error 在 AppSync 中发送自定义错误
- spring - 为什么使用外部tomcat运行spring boot项目时没有调用main方法
- eclipse - 像在 Eclipse 上一样在 Android Studio 上导入库
- php - 用于更新具有相同 session_id 的表的 PHP 查询
- bash - 为什么这个 shell 脚本适用于一个实例而不适用于另一个实例?