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

Question

我目前正在从事通过外包媒介提供给公司的项目。我的问题是关于渲染图像src。

以前，他们提供文件系统中的图像。我们现在不再合并使用AWS S3存储桶服务，因此不再需要使用该方法。我们还使用Cloudfront缓存，因此我们希望能够将URL从后端发送到前端（我们这样做），然后呈现图像。

[在模型中，我有一个从后端检索图像URL并返回它的函数，但是在渲染过程中，图像src被设置为[object Object]，我认为这是将src设置为该函数，而不是响应。

[这里是我们呈现检索网址的函数

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;
}),

这里是我们调用image.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')}}

Answer 1

这里，您正在从计算所得的属性返回一个承诺，该属性是一个对象，而不是字符串。

[通常，在渲染您的组件之前，我们实际上并不等待承诺解决。相反，我们先渲染一些东西（例如加载的gif），然后在解决诺言后重新渲染图像。

有两个传统的解决方案。一种是在计算属性中使用PromiseProxy。

return Ember.ObjectProxy.extend(Ember.PromiseProxyMixin).create({ promise });

您可以在模板中使用这样的代码：

{{#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并避免返回承诺的计算属性。这涉及到更强制性地重写代码。

请参见http://ember-concurrency.com/docs/introduction/

我通常更喜欢此解决方案，因为使用承诺代理可能会变得复杂且难以理解。

[此外，如果您使用的是Ember的较新版本（2.10或更高版本），则可以尝试ember-lifeline，该代码比ember-concurrency要少得多的代码，并且可以使用更简单的api足以满足这一需求。 （根据您的代码示例，我假设您使用的是旧版本。）请参见https://ember-lifeline.github.io/ember-lifeline/