我使用了react,electron,nodejs,asyncjs redux和thunk。我编写了以下代码,用于下载文件列表并将其写入磁盘。在我的代码中,当用户按下按钮时,我将其称为actionCreator:
export function downloadList(pack) {
return (dispatch, getState) => {
const { downloadManager } = getState();
async.each(downloadManager.downloadQueue[pack].libs, async (url, callback) => {
const filename = url.split('/').pop().split('#')[0].split('?')[0];
await downloadFile(url, `dl/${filename}`);
callback();
}, (err) => {
if (err) {
console.log('A file failed to process');
} else {
dispatch({
type: DOWNLOAD_COMPLETED,
packName: pack
});
}
});
};
}
async function downloadFile(url, path) {
const file = fs.createWriteStream(path);
const request = https.get(url, (response) => {
response.pipe(file);
file.on('finish', () => {
file.close();
});
}).on('error', (err) => { // Handle errors
fs.unlink(path); // Delete the file async. (But we don't check the result)
});
}
它做了它应该做的事情,但是当它这样做的时候,它会阻塞整个UI。我真的不明白为什么会这样,因为如果我使用一个
setTimeout
在async.each内部有3000ms的延迟,它不会阻塞UI。另一个奇怪的行为是,如果我使用asyncJS的eachLimit函数,它只会下载文件的上限,所以如果我想下载100个文件,但我将eachLimit设置为10个并行,它只会下载前10个文件,然后停止。你能告诉我这件事吗?我想使用axios下载文件,因为它不需要知道urls是http还是https,但是我找不到任何关于使用axios和stream responsetype的参考资料
发布于 2018-06-04 03:25:28
我可以回答第一部分。几乎所有现有的JavaScript实现都运行在一个线程上。这意味着运行时是并发的,但不是并行的,即运行时一次只做一件事。这意味着如果有一个函数调用需要一段时间,它将阻塞其他所有东西。因此,downloadList
函数中的某些东西阻塞了事件循环。但是,如果您使用setTimeout
,那么downloadList
函数将被推入消息队列,这将解除事件的阻塞并允许呈现UI。有关事件循环的更多信息,请查看this video
https://stackoverflow.com/questions/50669994
复制相似问题