Можно ли использовать loadImage () с обещанием JavaScript? - PullRequest
Новая
       7

Можно ли использовать loadImage () с обещанием JavaScript?

0 голосов
/ 12 января 2019

Я пишу приложение, рисующее частицы на экране в химической реакции.

Я написал класс Particle и хочу обработать асинхронную природу загрузки изображений в P5.js в этом классе .

Я думал, что если я оберну функцию loadImage() в Promise, я смогу загрузить все свои спрайты частиц асинхронно, а затем выполнить код рисования, как только разрешится объект P5 Image.

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

class Particle {

    constructor(name) {
        // Set properties on the Particle
        this.imageUrl = "THE_URL";
        this.imageObject = null;
    }

    loadParticleImage() {

        console.log("attempting to load image: " + this.imageUrl)

        return new Promise(function (resolve, reject) {
            loadImage(this.imageUrl, (result) => {

                // Sets the image object property to the result for other methods to access
                this.imageObject = result;

                // Resolves the Promise with the result
                resolve(result);

            }, reject(Error("Image not found")));
        })
    }

    drawParticle() {

        console.log("attempting to draw particle");

        this.loadParticleImage().then(function (imageObject) {

            // code to draw image and handoff to physics library

        }, function (error) {
            console.log("imageObject not defined", error);
        });

    }

}

А в функции setup() основного файла эскиза я бы инициализировал частицу и нарисовал ее, используя что-то вроде: 

theParticle = new Particle("Water");
theParticle.drawParticle();

Я получаю ошибку стека, говорящую о том, что изображение не может быть загружено, и я не могу понять, почему. 

attempting to draw particle
particle.js: attempting to load image: img/svg/Water.svg
particle.js: imageObject not defined Error: Image not found
at particle.js
at new Promise (<anonymous>)
at Particle.loadParticleImage (particle.js)
at Particle.drawParticle (particle.js)
at <anonymous>:1:18

1 Ответ

0 голосов
/ 12 января 2019

Я могу заметить две ошибки в вашем коде:

  • вы всегда сразу звоните reject(). Возможно, вы хотели передать обратный вызов loadImage, который отклонит обещание: 

    loadImage(this.imageUrl, (result) => {
    …
}, () => {
// ^^^^^^^
   reject(new Error("Image not found"));
});

  • ключевое слово this в вашем обратном вызове не то, которое вы ожидаете . Используйте функцию со стрелкой для обратного вызова исполнителя обещания, чтобы this ссылался на ваш Particle экземпляр, к которому был вызван loadParticleImage: 

    return new Promise((resolve, reject) => {
//                                   ^^
    loadImage(this.imageUrl, result => {
        this.imageObject = result;
        …
...