组件在等待 API Vue.js 中的响应之前呈现

Question

我创建了两个组件，根据 API 响应将呈现两个组件之一。

当Promise没有解析或者Promise解析时，但它发送一个空 object 它呈现错误，通知卡消息。
当Promise解析时，它会渲染保存数据响应的数据列表组件。

现在，我让它正常工作了。但是，我有一个小错误。当响应中有数据时，错误通知组件会呈现半秒。然后，它消失并呈现数据列表。显然，组件不会等待 Promise 来计算。

在 Promise 被评估之前，有没有办法阻止组件的渲染？或者你能给我提供其他解决方案吗？

呈现数据的组件：

<ReferralsList
      ref="referralList"
      v-if="mainSource"
      :service-id="serviceId"
      :source="mainSource"
/>

显示错误信息的组件：

<Card v-else>
  <template slot="card-content">
    <InlineNotification type="DANGER">
      {{
        The Client Intake module currently does not have any configured referral source.
      }}
    </InlineNotification>
  </template>
</Card>

Promise数据：

created() {
  this.getReferralsSources({ service_id: this.serviceId })
    .then(res => {
      if (res.status >= 200 && res.status < 300) {
        this.sourcesList = res.body;
        this.mainSource = Object.keys(this.sourcesList)[0];
        this.loading_sources = false;
      }
    })
    .catch(() => {
      const message = this.$t('Could not load referrals.');
      this.notifyError(message);
    });
},

Answer 1

您可以在数据中添加 showReferralsList: false。然后在您的 then-clause 中将其设置为 true:

if (res.status >= 200 && res.status < 300) {
    this.sourcesList = res.body;
    this.mainSource = Object.keys(this.sourcesList)[0];
    this.showReferralsList = true;
    this.loading_sources = false;
}

并将您的 ReferralsList 组件添加到 v-if="mainSource && showReferralsList"

希望对您有所帮助！

Answer 2

好吧，v-if 和 v-else 正好处理 2 个状态。但是您正在处理 3 种状态 - 加载、加载无错误、加载时出错。除非您更改模板以显式处理第三种状态（加载），否则其他两种状态之一将在加载期间呈现（空列表或误报错误消息组件）

解决方案：

在您的数据中引入 2 个状态变量 - isLoading: false 和 error: null
在开始加载数据之前，设置 isLoading= true 和 error = null
如果加载出错，设置isLoading= false、error = ...error
如果加载成功设置isLoading= false, error = null
使用以下模板：

<Card v-if="error">
 ...show error here
</Card>
<p v-else-if="isLoading">Loading...</p>
<ReferralsList v-else>
</ReferralsList>

或者如果您不需要确切的“错误”状态（恕我直言，这不是一个好主意）：

<p v-if="isLoading">Loading...</p>
<ReferralsList v-else-if="mainSource">
</ReferralsList>
<Card v-else>
 ...Some static error message
</Card>

...同上逻辑，每次开始加载前将mainSource设为null即可

有一个 great 3rd party component 以非常好的方式处理这个...

组件在等待 API Vue.js 中的响应之前呈现

Component renders before waiting for API Response in Vue.js

vue.js

vuejs2

promise

components

vue-directives