VueJs Async Api 数据最佳实践

Question

我正在 NuxtJs 中构建一个无头 SPA SSR，我想知道什么最佳实践可以确保仅在与远程建立连接时才加载应用程序 API。

目前这是我的 index.vue 组件：

<template>
<div class="wrapper">
  <div class="content">
    <div class="title">
      <h1>{{site.meta.title}}</h1>
    </div>
  </div>
</div>
</template>

<script>
import Meta from '../classes/api/General/Meta'

export default {
  data () {
    return {
      meta: null
    }
  },
  created () {
    Meta.getMeta().then((response) => {
      this.meta = response.data
    })
  }
}
</script>

这有时会解决 site.meta.title 未定义的问题，因为站点在 api 数据初始化之前加载。是的，site.meta.title 是在 api 中定义的。所以。我想的下一步是像下面的脚本一样使用异步：

<script>
import Meta from '../classes/api/General/Meta'

export default {
  data () {
    return {
      meta: null
    }
  },
  async created () {
    await Meta.getMeta().then((response) => {
      this.meta = response.data
      console.log(response.data.site.logo)
    })
  }
}
</script>

尽管这无济于事。

但是 v-if="meta" 确实有帮助。 Though: 现在看来 Axios 不再渲染代码（ssr）中的内容了。

Answer 1

console.log 对于异步调试 tbh，您真的不能 100% 信任它。
console.log(JSON.parse(JSON.stringify())) 可以提供更多帮助，但有时仍有一些缺点。

至于最佳实践，beforeCreate 和 created 都在双方（服务器 + 客户端）上执行运行，因此可以使用它们。您还可以使用 asyncData 和新的 fetch（这是一个 Nuxt 挂钩，而不是实际的 fetch API）。

注意正确使用 async/await 语法（这里不需要 then）：

async created() {
  const response = await Meta.getMeta()
  this.meta = response.data
  console.log(this.meta)
}

此外，如果 async/await 得当，这种情况实际上永远不会发生

because the site is loading before the api data has been initialised

您可以在这里阅读更多关于 Nuxt 生命周期的信息：https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle

我建议通常使用 async fetch() 方式（非阻塞，好帮手），或者 async asyncData() 如果您需要阻塞方法。中间件也有助于使围绕您的应用程序的整个过程更加灵活。

您可以在此处获得 fetch 与 asyncData 之间差异的完整解释：https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/

如果您想了解如何在真实场景中使用 fetch 的示例，您可以阅读这篇文章：https://nuxtjs.org/blog/build-dev-to-clone-with-nuxt-new-fetch/

Answer 2

所以，事实证明我的理解方式完全错误。在最新的 nuxt 版本中，现在包含异步获取方法（内置）。

有了这个，所有渲染等都可以正常工作并且符合预期。我结束的工作代码现在看起来像这样：

<script>
export default {
  async fetch () {
    this.meta = await fetch(
      'https://testurl.com/meta'
    ).then(res => res.json())
  },
  data () {
    return {
      meta: null
    }
  }
}
</script>

fetch 的美妙之处在于您可以像这样添加侦听器：

<p v-if="$fetchState.pending">Fetching site</p>
<p v-else-if="$fetchState.error">Error happened</p>
<p>This content will be rendered server side even though waiting time</p>

我只是 post 提出这个问题是因为我原来的问题有点没有解释清楚，希望能帮助到其他人。

编辑： 我已经将 kissu 标记为答案（在我创建这个之后确实看到了 post），因为它被解释得很好而且做得很好！谢谢:-)

VueJs Async Api 数据最佳实践

VueJs Async Api Data best practice

vue.js

nuxt.js

load