javascript - 有没有一种好方法可以确保在使用对象的代码之前创建对象？

Question

我有一些代码，使用fetch()来抓取.tiff图像并将其转换为html5 Canvas ，以便使用tiff在浏览器中显示.js (https://github.com/seikichi/tiff.js/tree/master)。它几乎工作得很好，但是，我注意到有时图像无法进入浏览器。

某些图像会出现，但有时其他图像不会出现，并在浏览器中显示以下错误消息:

ReferenceError:Tiff 未定义

我需要找出是否有好的方法来确保成功创建这些对象，并且希望能够深入了解导致此行为的原因。

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

有时可能会加载所有图像，有时则不会。如果页面刷新足够多次，肯定会看到某些图像无法加载。请注意，在我的实际项目中，我在 13 个对象上实例化并调用 loadImage()。

Answer 1

阅读Promises 。 Promise 将允许您在继续操作之前等待异步操作完成。

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。如果您使用这些，那么您就错误地使用了 Promise。