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

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

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

Answer 1

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

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。如果你使用这些，那么你使用的 Promises 是错误的。