如何在JavaScript构造函数中验证文件签名并控制后续代码执行？

你遇到的核心问题是FileReader是异步操作：构造函数里的checkBlobSignature调用会立刻返回，for循环同步执行完就直接走后续代码，根本等不到验证完成；而且check方法里抛出的异常是在异步回调中，外层的try/catch根本抓不到——异步代码的异常不会冒泡到同步的try/catch上下文里。

构造函数本身不能是async的，但可以用静态工厂方法封装异步验证逻辑，确保只有验证通过后才实例化类，后续构造代码自然只会在验证成功后执行。

修改后的完整代码 #

class ImageEditor {
    // 私有构造函数，仅通过create方法实例化
    constructor(blobs) {
        // 这里放原后续构造代码，仅在验证通过后执行
        this.blobs = blobs;
        /* 
         * Rest of my constructor code that I want to be executed
         * if the for loop is finished, i.e. there are no exceptions.
         */
    }

    // 静态工厂方法，负责异步验证并创建实例
    static async create(blobs) {
        // 逐个验证所有Blob
        for (const blob of blobs) {
            await ImageEditor.checkBlobSignature(blob);
        }
        // 全部验证通过，才实例化类
        return new ImageEditor(blobs);
    }

    // 将验证逻辑包装为Promise，处理异步状态
    static checkBlobSignature(blob) {
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            fileReader.addEventListener("loadend", (e) => {
                try {
                    ImageEditor.check(e);
                    resolve(); // 验证成功，返回成功状态
                } catch (err) {
                    reject(err); // 验证失败，抛出错误
                }
            });
            // 监听文件读取失败的情况
            fileReader.addEventListener("error", (err) => {
                reject(`文件读取失败：${err.message}`);
            });
            fileReader.readAsArrayBuffer(blob.slice(0, 8));
        });
    }

    // 静态验证方法，抛出异常或正常返回
    static check(e) {
        const uint8Array = new Uint8Array(e.target.result);
        let signature = "";

        for(const uint8 of uint8Array) {
            signature += uint8.toString(16);
        }
        signature = signature.toUpperCase();
        
        switch (true) {
            case /^89504E470D0A1A0A/.test(signature): // PNG 签名
                break;
            case /^474946383761/.test(signature): // GIF 签名
            case /^474946383961/.test(signature): // GIF 签名
                break;
            case /^FFD8FF/.test(signature): // JPEG 签名
                break;
            case /^6674797069736F6D/.test(signature): // MP4 签名
                break;
            default:
                throw new Error("Invalid signature.");
        }
    }
}

使用方式 #

// 用Promise链式调用处理
ImageEditor.create(yourBlobs)
    .then(editor => {
        // 验证通过，使用编辑器实例
    })
    .catch(err => {
        // 验证失败，处理错误
        console.error(err);
    });

// 或在async函数中用await
async function initEditor() {
    try {
        const editor = await ImageEditor.create(yourBlobs);
        // 使用编辑器实例
    } catch (err) {
        console.error(err);
    }
}

关键改动说明 #

1. Promise化异步验证：把checkBlobSignature改成返回Promise，用resolve/reject传递验证的成功/失败状态，解决异步操作的状态捕获问题。
2. 静态工厂方法：用static async create封装异步逻辑，确保只有所有验证通过后才实例化类，从根源保证构造函数后续代码仅在验证成功后执行。
3. 完善错误处理：把字符串抛出改为Error对象，符合JS错误处理规范；同时监听FileReader的error事件，覆盖文件读取失败的场景。

这种方案既保留了类的结构，又用最清晰的异步处理方式解决了问题，比回调函数更易维护，也避开了构造函数的异步陷阱。

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