第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Ember JS - 如何在渲染之前等待異步函數(shù)響應

Ember JS - 如何在渲染之前等待異步函數(shù)響應

qq_花開花謝_0 2022-01-07 10:44:04
我目前正在從事一個通過外包媒體提供給公司的項目。我的問題是關于渲染圖像 src。以前他們從文件系統(tǒng)中提供圖像。我們不再希望使用這種方法,因為我們現(xiàn)在合并了 AWS S3 存儲桶服務。我們還使用云端緩存,因此我們希望能夠?qū)?URL 從后端發(fā)送到前端(我們這樣做),然后渲染圖像。在模型中,我有一個從后端檢索圖像 URL 并返回它的函數(shù),但是在渲染過程中,圖像 src 被設置為 [object Object] 我認為這是將 src 設置為函數(shù)而不是響應。這是我們渲染檢索 url 的函數(shù)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 promisereturn path;}),這是我們調(diào)用 image.baseUrl 的地方,其中 src 被設置為 [object Object]{{lazy-imageurl=(concat image.baseUrl)alt=(if title title (if image.title image.title 'Image'))class=(if class class 'img-responsive')}}
查看完整描述

1 回答

?
天涯盡頭無女友

TA貢獻1831條經(jīng)驗 獲得超9個贊

在這里,您從您的計算屬性返回一個承諾,它是一個對象,而不是一個字符串。


通常,在渲染您的組件之前,我們實際上不會等待 promise 解決。相反,我們先渲染一些東西(比如加載 gif),然后在 promise 解決后重新渲染圖像。


這個問題有兩種傳統(tǒng)的解決方案。一種是在您的計算屬性中使用 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


第二種傳統(tǒng)解決方案是使用ember-concurrency和避免返回承諾的計算屬性。這涉及重寫您的代碼以使其更具必要性。


請參閱http://ember-concurrency.com/docs/introduction/


我通常更喜歡這種解決方案,因為使用 Promise 代理會變得復雜且難以理解。


此外,如果您使用的是更現(xiàn)代的 Ember 版本(2.10 或更高版本),您可以嘗試ember-lifeline添加到項目中的代碼量比添加到項目中的代碼要少得多ember-concurrency,以及更簡單的 API 足以滿足此需求。(我根據(jù)您的代碼示例假設您使用的是舊版本的 Ember,但使用的是現(xiàn)代瀏覽器。)請參閱https://ember-lifeline.github.io/ember-lifeline/


查看完整回答
反對 回復 2022-01-07
  • 1 回答
  • 0 關注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號