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

我有一段代码，它使用

fetch（）

抓取.tiff图像并将其转换为html5画布，以便使用tiff.js（）在浏览器中显示。它几乎工作得很好，但是，我注意到有时图像无法进入浏览器

某些图像将出现，但偶尔其他图像不会出现，浏览器中会显示以下错误消息：

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（）

。

请继续阅读。承诺将允许您等待异步操作完成后再继续

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

和

wait

。如果您使用这些，那么您使用的承诺是错误的。

是：使用

fetch（）

返回的承诺。为什么要使用

fetch（this.tiffURL）

，然后使用

let response=wait fetch（this.tiffURL）？此外，错误似乎指向在
fetch
返回之前未加载此“tiff.js”，这似乎很奇怪。您可能希望查看相对于调用
loadImage
…@Pointy，您正在加载该库的位置，如果您对您的评论有信心，可以详细说明一下吗？据我所见，问题不在
fetch（）
调用中，而是在
Tiff（）
对象的实例化中。@Heritic Monkey抓到了！我减少了代码以发布一个示例，但仍然没有发现那个错误。删除第一个
fetch（）
调用后，页面要么加载所有图像，要么不加载任何图像，而不是只加载一些图像，这很有趣。@Heritic Money我似乎是在包含上述代码示例的tiff.min.js文件之后加载tiff.js库的。重新排序似乎已经纠正了这个问题。我需要看到它运行一段时间来真正测试它，但它看起来很有希望。如果你愿意把你的建议作为回答，我会接受的，谢谢！谢谢你的回复。我很欣赏这个代码示例，并将实现您的建议。然而，我想指出的是，这个答案是离题的，因为这个特定问题的解决方案是我加载脚本的顺序，这是@Heritic Monkey建议的