loadImage() 可以与 JavaScript Promise 一起使用吗？

Question

我正在编写一个应用程序，通过化学反应在屏幕上绘制粒子。

我写了一个 Particle class 并且 想在这个 class[=32] 中处理 P5.js 中加载图像的异步性质=].

我的想法是，如果我将 loadImage() 函数包装在 Promise 中，我应该能够异步加载我的所有粒子精灵，然后在 P5 图像对象解析后立即执行绘制代码.

我只使用 loadImage() 的回调功能就可以让这段代码正常工作，但我最终不得不 将图像对象交给物理库来模拟粒子运动 以及其他构造函数，因此 Promise 模式似乎是正确的解决方案。

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

Answer 1

我可以在您的代码中发现两个错误：

您总是立即呼叫 reject()。您可能想将回调传递给 loadImage 以拒绝承诺：

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

the this keyword in your callback is not the one you expect。对 promise 执行器回调也使用箭头函数，让 this 引用你的 Particle 实例，loadParticleImage 被调用：
```
return new Promise((resolve, reject) => {
//                                   ^^
    loadImage(this.imageUrl, result => {
        this.imageObject = result;
        …
```

loadImage() 可以与 JavaScript Promise 一起使用吗？

Can loadImage() be used with a JavaScript Promise?

promise

p5.js