ember.js Ember JS -如何在渲染前等待异步函数响应

7uzetpgm  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(174)

我目前正在做一个项目,这是给公司通过外包媒体。我的问题是在有关渲染图像源代码。
以前他们从文件系统提供图像。我们不再想使用这种方法,因为我们现在整合了AWS S3 bucket服务。我们还使用cloudfront缓存,因此我们希望能够从后端向前端发送URL(我们确实这样做了),然后渲染图像。
在模型中,我有一个函数,它从后端检索图像URL并返回它,但是在渲染过程中,图像src被设置为[object Object],我认为这是将src设置为函数而不是响应。

这是我们用来呈现和检索url的函数

baseUrl: Ember.computed(async function () {
let adapter = this.store.adapterFor('article-image');
let ajax = this.get('ajax');

let path = ''

let API_URL = `${adapter.buildURL('article-image', this.id)}/original/${this.get('fileName')}`;
let promise = new Promise((resolve, reject) => {
  ajax.request(API_URL, {
    method: 'GET'
  })
    .then(function (response) {
      resolve(response.path);
    })
    .catch(function (err) {
      console.log('error');
      console.log(err);
    });
})
path = await promise
return path;
}),

这里是我们调用图像.baseUrl的地方,其中src被设置为[object Object]

{{lazy-image
url=(concat image.baseUrl)
alt=(if title title (if image.title image.title 'Image'))
class=(if class class 'img-responsive')}}
n53p2ov0

n53p2ov01#

在这里,您将从计算属性返回一个承诺,该属性是一个对象,而不是字符串。
通常,我们并不等待承诺得到解决才呈现组件,而是先呈现一些东西(比如加载中的gif),然后在承诺得到解决时重新呈现图像。
对于这个问题有两种传统的解决方案,一种是在计算属性中使用PromiseProxy。
ember-concurrency
您可以在模板中使用如下代码:

{{#if image.baseUrl.isPending}}
  <img src="loading.gif">
{{else}}
  {{lazy-image url=(concat image.baseUrl.content) ...}}
{{/if}}

请参阅https://api.emberjs.com/ember/release/classes/PromiseProxyMixin
第二个传统的解决方案是使用ember-concurrency,避免返回promise的计算属性,这需要重写代码使其更具强制性。
请参阅http://ember-concurrency.com/docs/introduction/
我通常更喜欢这种解决方案,因为使用promise代理可能会变得复杂和难以理解。
此外,如果您使用的是更现代的Ember版本(2.10或更高版本),您可以尝试ember-lifeline,它比ember-concurrency要少得多,沿着有一个更简单的API,足以满足此需求。(根据代码示例,我假设您使用的是更旧版本的Ember,但使用的是现代浏览器。)请参见https://ember-lifeline.github.io/ember-lifeline/

相关问题