Question

我正在构建一个Web应用程序，该应用程序需要在浏览器中显示TIFF图像（除其他外），并且碰壁试图正确组织数据。

我想创建一个类，该类将保存我正在处理的项目的相关数据，以便可以通过类方法使用它。由于数据是通过从服务器解析TIFF文件来检索的，因此需要通过Fetch API之类的方法来实现。

在下面的示例中，我使用Chrome Web Server从本地URL提取TIFF，然后使用Tiff.js（https://github.com/seikichi/tiff.js/tree/master）在画布中创建并显示它：

class boardImage {
    constructor(boardType) {
        this.boardType = boardType;
        this.boardURL = 'http://127.0.0.1:8887/28431413.Display.' + this.boardType + '.tif'
        this.canvas;
        this.width;
        this.height;
        this.loadImage()
    }

    async loadImage() {
        fetch(this.boardURL)
            .then((response) => {
                response.arrayBuffer().then((buffer) => {
                    let tiff = new Tiff({buffer: buffer});
                    this.width = tiff.width();
                    this.height = tiff.height();
                    this.canvas = tiff.toCanvas();
                    if (this.canvas) {
                        this.canvas.classList.add("boardimage");
                        this.canvas.setAttribute('style', 'width:' + this.width + 'px; height: ' + this.height + 'px;');

                        // this works but I don't want to call this here
                        this.displayImage();
                    }
                })
            })
    }

    displayImage() {
        document.getElementById("boardview").append(this.canvas);
    }

}

以上代码之所以有效，是因为在链中调用了displayImage()。当我在链外调用它时，画布图像未定义。 在任一情况下，都正确设置了类成员，并且我可以在浏览器控制台中看到canvas，width和height的适当值。我想在实例化类时加载相关数据，并在需要时加载诸如displayImage()之类的调用方法或引用成员变量。

我知道这是异步行为，但是我不知道如何正确处理它。谢谢！

Answer 1

这是异步和等待的一种方式：

class boardImage {
constructor(boardType) {
    this.boardType = boardType;
    this.boardURL = 'http://127.0.0.1:8887/28431413.Display.' + this.boardType + '.tif'
    this.canvas;
    this.width;
    this.height;
}

async loadImage() {
    let response = await fetch(this.boardURL)
    let buffer  = await response.arrayBuffer()
    let tiff = new Tiff({buffer: buffer});
    this.width = tiff.width();
    this.height = tiff.height();
    this.canvas = tiff.toCanvas();
    if (this.canvas) {
        this.canvas.classList.add("boardimage");
        this.canvas.setAttribute('style', 'width:' + this.width + 'px; height: ' + this.height + 'px;');
    }
}

displayImage() {
    document.getElementById("boardview").append(this.canvas);
}

}

let image = new boardImage("example")
image.loadImage().then((response) => {
    image.displayImage()
})

您创建一个boardImage，然后调用loadImage方法，该方法返回一个Promise。在承诺解决后，您将显示画布。

希望这会有所帮助。

是否可以通过fetch（）设置类成员，以便将其用于其他类方法？

1 个答案: