承诺解决后如何渲染模板？答案

【问题标题】：How to render a template after promise resolves?承诺解决后如何渲染模板？
【发布时间】：2019-04-29 02:57:24
【问题描述】：

我想在解决承诺后返回要在父级中呈现的模板。我知道不能从承诺中返回价值。收到模板数据后如何渲染模板？

在以下示例中，ContentPane 是列出所有要呈现的模板的父级。在电影中，会进行网络调用，因此需要渲染模板。

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
}

【问题讨论】：

请注意，函数getTemplate 不返回承诺。它只是以同步方式返回模板字符串。因此你不能在上面使用.than()
@NirWeber 我已经用 getTemplate 函数更新了问题

标签： javascript ecmascript-6 es6-promise

【解决方案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);
});

【讨论】：

遵循这种方法会导致整个组件链的异步等待，这会影响性能。有没有其他可能的方法？
在播放内容之前，您将不得不等待影片。没办法。

【解决方案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);
  });

【讨论】：

遵循这种方法会导致整个组件链的异步等待，这会影响性能。有没有其他可能的方法？
因为它是异步的。你可以添加加载动画。

【解决方案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'))
  })

【讨论】：