承諾解決后如何呈現模板？

Question

我希望在解析promise之后返回要在父級中呈現的模板。 我知道價值不能從承諾中返回。 收到模板數據后，如何呈現模板？

在以下示例中，ContentPane是列出要呈現的所有模板的父級。 在Films中，進行網絡調用，因此需要呈現模板。

ContentPane.prototype.getTemplate = function(){
    let template = `
        <div class="contentPane" id="contentPane">
        ${new Films().render()}
        </div>
    `;
    return template;
}


Films.prototype.render =  function(){
    var template =  this.getTemplate();
    template.then(function(val){
        return val;
    })
    //based on the value resolved by promise,
//appropriate template should be returned to parent
}

Films.prototype.getTemplate = async function(){
  //make network call
  //create template based on server response
}

Answer 1

嘗試aync-await操作....

const ContentPane = function() {}
const Films = function () {}

ContentPane.prototype.getTemplate = async function(){
  let template = `
      <div class="contentPane" id="contentPane">
      ${await new Films().render()}
      </div>
  `;
  return template;
}
Films.prototype.render =  async function(){
  var value =  await this.getTemplate();
  return value;
}
Films.prototype.getTemplate = async function(){
   return new Promise((res, rej) => {
       setTimeout(() => {
           res('123');
        }, 1000);
    });
}
new ContentPane().getTemplate().then(template => {
  console.log(template);
});

Answer 2

我寫了一個例子。 ContentPane.prototype.getTemplate可以返回一個promise，然后你可以從then回調函數中獲取模板。 喜歡這個new ContentPane().getTemplate().then(template => { console.log(template); });

  const ContentPane = function() {}
  const Films = function () {}

  ContentPane.prototype.getTemplate = async function(){
    const filmsTemplate = await new Films().render();
    let template = `
        <div class="contentPane" id="contentPane">
        ${filmsTemplate}
        </div>
    `;
    return template;
  }


  Films.prototype.render =  function(){
    var template =  this.getTemplate();
    return template.then(function(val){
      return val;
    })
    //based on the value resolved by promise,
    //appropriate template should be returned to parent
  }

  Films.prototype.getTemplate = async function(){
    //make network call
    //create template based on server response
    return await new Promise((resolve) => {
      resolve('123')
    })
  }

  new ContentPane().getTemplate().then(template => {
    console.log(template);
  });

Answer 3

你可以像這樣解決你的問題。 它適合我：

<items ref="items" :all="all" @remove="removeItem" />

和==>

this.$api.productCategories.delete(item.id , true)
  .then(res => { 
    this.all = this.all.filter(i => i.id !== item.id) this.$showSuccess(this.$t('productCategories.productCategoryRemoved'))
    this.$nextTick(() => {
      this.$refs.items.reinit()
    })
  })
  .catch(err => {
    this.$showError(this.$getLocaleErrorMessage(err, 'productCategories'))
  })