Можно ли установить членов класса с помощью fetch (), чтобы их можно было использовать в других методах класса?

Question

Я создаю веб-приложение, которое должно отображать изображения TIFF в браузере (помимо прочего), и пытаюсь правильно организовать данные.

Я хочу создать класс, который будет содержать соответствующие данные для элементов, с которыми я работаю, чтобы его можно было использовать через методы класса. Поскольку данные извлекаются путем синтаксического анализа файла TIFF с сервера, это необходимо выполнить с помощью чего-то вроде Fetch API.

В приведенном ниже примере я извлекаю TIFF из локального URL-адреса с помощью Chrome Web Server, затем создаю и отображаю его на холсте с помощью 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, который возвращает обещание. После выполнения обещания вы отображаете холст.

Надеюсь, это поможет.