Есть ли хороший способ убедиться, что объект создан, прежде чем перемещаться по коду, который его использует?

Question

У меня есть немного кода, который использует fetch() для захвата и преобразования .tiff изображений в холст html5 для отображения в браузере с использованием tiff.js (https://github.com/seikichi/tiff.js/tree/master). Это почти прекрасно работает, однако, я заметил, что иногда изображения не попадают в браузер.

Некоторые изображения появляются, но иногда нет, со следующим сообщением об ошибке вбраузер:

ReferenceError: Tiff is not defined

Мне нужно выяснить, есть ли хороший способ обеспечить успешное создание этих объектов, и был бы признателен за любую информацию, которую я мог бы выяснить, в чем причина этогоповедение.

class tiffImage {
    constructor() {
        this.tiffURL = 'url-to-image';
        this.height;
        this.width;
        this.canvas;
    }

    async loadImage() {
        fetch(this.tiffURL)
            // retrieve tiff and convert it to an html5 canvas
            let response = await fetch(this.tiffURL);
            let buffer = await response.arrayBuffer();
            let tiff = new Tiff({buffer: buffer});  // error points to this line
            this.canvas = tiff.toCanvas();

            /* Parse some data from image and do DOM stuff */

    }

}

// retrieve and display boards
let someTiff1 = new tiffImage();
let someTiff2 = new tiffImage();
let someTiff3 = new tiffImage();
let someTiff4 = new tiffImage();
let someTiff5 = new tiffImage();

someTiff1.loadImage();
someTiff2.loadImage();
someTiff3.loadImage();
someTiff4.loadImage();
someTiff5.loadImage();

Иногда все изображения загружаются, вероятно, а иногда нет. Если страница обновляется достаточно много раз, это гарантирует, что некоторые изображения не загружаются. Обратите внимание, что в моем реальном проекте ясоздание и вызов loadImage() 13 объектов.

Answer 1

Читайте Обещания . Обещание позволит вам дождаться завершения асинхронных действий перед выполнением.

loadImage() {
    return fetch(this.tiffURL)
        .then(response=>{
        // retrieve tiff and convert it to an html5 canvas
        let buffer = response.arrayBuffer();
        let tiff = new Tiff({buffer: buffer});  // error points to this line
        this.canvas = tiff.toCanvas();
        return this;

        /* Parse some data from image and do DOM stuff */
    }
}

Promise.all([someTiff1.loadImage(),someTiff2.loadImage()])
.then(results=>{
    console.log("My results", results)
})

Не используйте async и await в своем коде. Если вы используете их, вы используете обещания неправильно.