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

Question

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

以前他们从文件系统中提供图像。我们不再希望使用这种方法，因为我们现在合并了 AWS S3 存储桶服务。我们还使用云端缓存，因此我们希望能够将 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;

}),

这是我们调用 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

在这里，您从您的计算属性返回一个承诺，它是一个对象，而不是一个字符串。通常，在渲染您的组件之前，我们实际上不会等待 promise 解决。相反，我们先渲染一些东西（比如加载 gif），然后在 promise 解决后重新渲染图像。这个问题有两种传统的解决方案。一种是在您的计算属性中使用 PromiseProxy。return Ember.ObjectProxy.extend(Ember.PromiseProxyMixin).create({ promise });您可以在模板中使用这样的代码：{{#if image.baseUrl.isPending}}&nbsp; <img src="loading.gif">{{else}}&nbsp; {{lazy-image url=(concat image.baseUrl.content) ...}}{{/if}}见https://api.emberjs.com/ember/release/classes/PromiseProxyMixin第二种传统解决方案是使用ember-concurrency和避免返回承诺的计算属性。这涉及重写您的代码以使其更具必要性。请参阅http://ember-concurrency.com/docs/introduction/我通常更喜欢这种解决方案，因为使用 Promise 代理会变得复杂且难以理解。此外，如果您使用的是更现代的 Ember 版本（2.10 或更高版本），您可以尝试ember-lifeline添加到项目中的代码量比添加到项目中的代码要少得多ember-concurrency，以及更简单的 API 足以满足此需求。（我根据您的代码示例假设您使用的是旧版本的 Ember，但使用的是现代浏览器。）请参阅https://ember-lifeline.github.io/ember-lifeline/