从弹窗调用FileSystem API时写入文件失败的问题排查

问题1：弹窗调用时写入磁盘失败的原因 #

原代码中，storeText作为async函数，却没有正确等待所有异步操作完成：

• 在showSaveFilePicker的then回调中，执行fileHandle.createWritable()及后续写入操作时，没有将这些异步操作的Promise返回给外层Promise链。
• 这导致storeText的Promise在用户选择完文件后就提前resolve，函数执行结束。
• 对于弹窗而言，其执行上下文在函数返回后可能被浏览器回收或挂起，后续的文件写入异步操作无法继续执行，因此仅创建了空文件，没有写入内容。而主窗口的上下文始终活跃，所以后续操作能正常完成。

问题2：无法查看失败日志的原因 #

由于弹窗的执行上下文被回收，createWritable()和write()的回调函数（包括成功和失败分支）根本没有机会触发，因此对应的日志无法被打印。

修复后的代码 #

用await替代then链式调用，确保所有异步操作都被正确等待，同时统一用try/catch处理错误：

async function storeText(text = "...", win = null) {
    const targetWin = win || window;
    const options = {
        types: [
            {
                description: 'Text files',
                accept: {
                    'text/plain': ['.txt'],
                },
            },
        ],
        suggestedName: "LoremIpsumFile.txt",
    };

    try {
        const fileHandle = await targetWin.showSaveFilePicker(options);
        console.log("got a file handle");
        
        const writable = await fileHandle.createWritable();
        console.log("Got a writable object");
        console.log("Text is:\n " + text);
        
        await writable.write(text);
        console.log("Successfully written, now close");
        
        await writable.close();
        console.log("File closed successfully");
    } catch (error) {
        console.log("Error occurred:", error);
    }
}

关键修复点 #

1. 使用await等待所有异步操作，确保函数直到所有文件操作完成后才返回。
2. 用try/catch统一捕获整个流程中的错误，避免遗漏任何异常日志。
3. 简化窗口对象的赋值逻辑，提升代码可读性。

内容的提问来源于stack exchange，提问作者nhaggen