Javascript 是否可以通过fetch（）设置类成员，以便在其他类方法中使用？

我正在构建一个webapp，它需要在浏览器中显示TIFF图像（除其他外），并且正在尝试正确组织数据

我想创建一个类，它将保存我正在处理的项的相关数据，以便可以通过类方法使用它。因为数据是通过解析来自服务器的TIFF文件来检索的，所以需要通过类似Fetch API的方式来完成

在下面的示例中，我使用Chrome Web服务器从本地URL获取TIFF，然后使用TIFF.js（）在画布中创建并显示它：

上述代码之所以有效，是因为链中调用了

displayImage（）

。当我在链外调用它时，画布图像是未定义的在这两种情况下都正确设置了类成员，我可以在浏览器控制台中看到画布、宽度和高度的适当值。我只想在实例化类时加载相关数据，调用方法如

displayImage（）

或在需要时引用成员变量

---

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

这里有一种使用async和Wait的方法：

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方法，该方法返回一个承诺。承诺解决后，显示画布

---

希望这会有所帮助。

您可以这样做。。。如果loadImage返回了一个承诺，但它没有t@JaromandaXloadImage是异步的，这意味着即使未指定它也会返回一个承诺。对不起，我的意思是，它返回一个与中的异步任务无关的无意义承诺it@JaromandaX我编辑我的帖子是为了展示一种更好的方式。不，这不是一种好的方式。当你已经有承诺的时候，不要在没有错误处理的情况下返回回调。看看合适的解决方案谢谢@Bergi，这个链接有一些很好的解释，概述了一些更好的方法。

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()
})