javascript - ElectronJS:使用调用/句柄时不需要多次触发记录方法
问题描述
如标题所述。我的 ElectronJS 项目有这个问题。当我尝试从调用的处理程序记录输出时,记录会发生多次,即使该函数只运行一次。这可能是什么原因?
对于创建的每个类对象,该函数只运行一次。请参阅底部的 GIF 以查看“实际中”的问题。
我已经尝试删除处理程序和侦听器,但这只会使下一个对象无法调用downloadPoster
..
提前感谢您的帮助。
以下是对象的实例化和“处理”方式。
// On drop
window.ondrop = async function(e) {
e.preventDefault();
body.classList.remove('file-hover');
for (var [i, file] of Object.entries(e.dataTransfer.files)) {
var x = new Movie(file.path);
await x.process();
}
return false;
};
这是类中的函数renderer.js
/**
* Download poster file for movie
*/
async downloadPoster() {
// This is the url used to search for the poster we want
var searchUrl = new URL(Config.api.searchUrl);
searchUrl.search = new URLSearchParams({
page: 1,
api_key: Config.api.key,
query: this.#movie.tags.title,
year: this.#movie.tags.year
});
// Search for poster in the main thread
await axios.get(searchUrl.href)
.then(async (resp) => {
// No results
if (resp.data.total_results <= 0) {
this.log('No poster found', 'error');
return;
}
// Invoke poster download
const result = await ipcRenderer.invoke('downloadPoster', {
src: Config.api.posterUrl + resp.data.results[0].poster_path,
dest: path.join(this.#movie.new.absolutePath, Config.api.posterFilename)
})
// This shows "undefined"
this.log(result);
})
.catch(async (err) => {
this.log('Could not search for poster: ' + err, 'error');
});
}
这是来自的处理程序函数main.js
// Download poster
ipcMain.handle('downloadPoster', async (event, args) => {
await axios.get(args.src, { responseType: 'stream' })
.then(async (resp) => {
const writeStream = fs.createWriteStream(args.dest);
// Write data to file
await resp.data.pipe(writeStream);
// When finished, send reply back
writeStream.on('finish', async () => {
return {
success: true,
message: 'Poster downloaded'
}
});
// On error writing, send reply back
writeStream.on('error', async (err) => {
return {
success: false,
message: 'Could not write poster to file: ' + err
}
});
})
.catch(async (err) => {
return {
success: false,
message: 'Could not download poster: ' + err
}
});
});
解决方案
你可能误解了invoke
/ handle
。使用该功能的全部意义在于,主进程中处理程序的返回值由渲染器中的调用方法返回。所以你可以这样做:
// main.js
ipcMain.handle('some-command', async (evt, data) => {
// do something with data, the handler can also be async
const value = await getSomeValue();
return doSomething(data, value);
}
// renderer.js
(async () => {
const invokeReturn = await ipcRenderer.invoke('some-command', data);
// invokeReturn will contain the result of doSomething(data, value) from main
})
我需要对您的代码进行一些调试才能确定,但我的直觉是该行为是由这段代码引起的:
// Poster download reply from the invoke above
ipcRenderer.on('downloadPosterReply', async (event, args) => {
您正在设置一个侦听器并且从不删除它,因此每个函数调用都会添加一个新的处理程序,从而导致出现越来越多的日志。感谢invoke
/ handle
,您根本不需要在on
这里使用处理程序。
推荐阅读
- sql - 按列的值对列进行排序
- regex - 使用正则表达式查找不包含字符串的文本块
- scala - regex check and proceed next call
- ubuntu - 如何从虚拟环境中将我的 jupyter 笔记本作为服务运行
- pip - 即使成功安装了pyramid-arima,也无法导入
- apache-kafka - 尝试使用Kafka将数据从服务器A发送到服务器B
- c++ - 如何解释嵌套的继承类结构?
- spring - 如何在本地重现“java.sql.SQLRecoverableException: Closed Connection”错误?
- ruby-on-rails - 如何对表单值进行操作?
- azure - 使用 NodePort 访问 azure kubernetes 集群