在 Nuxt 应用里面可以通过 useAsyncData 使用异步数据。

用一下 useAsyncData ，第一个参数是一个唯一的 key，这个 key 可以确保去掉请求的时候出现的重复数据。第二个参数是 handler，这个 handler 返回的是异步数据。一个函数，返回的东西可以用一下这个 $fetch ，请求一下内容列表接口。

下面我们再解构一下 useAsyncData 返回的数据，data 是异步获取到的数据，重新给它起个名字叫 posts，pending，表示当前是否正在加载数据，refresh 可以重新请求获取数据，error 表示请求是否出错了。

在浏览器测试一下，现在内容列表页面上仍然会显示一组内容列表项目。切换到其它的页面，刷新一下页面，然后打开 网络 选项卡，限制一下网络速度，选择低速 3G。

点击 内容 打开内容列表页面，应用会先请求内容列表页面需要的数据，有了可用数据以后才能打开内容列表页面，也就是在有可用数据之前会阻止导航。

如果你希望不阻止导航，可以在使用 useAsyncData 的时候提供一个选项参数，然后把 lazy 设置成 true。

在修改一下组件模板，因为现在 useAsyncData 用了 lazy 模式，所以我们要处理数据为 null 的这种情况，添加一组 div，包装一下这个内容列表，在这个元素上用 v-if 判断一下 posts !== null，这样只有 posts 不是 null 的情况下，才会显示这组内容列表项目。

然后在上面再添加一组 div，在这个元素上可以使用 v-if 指令判断一下 pending，要显示的文字是加载中... 这样如果正在加载异步数据，就会显示 加载中 ...

回到浏览器再测试一下，打开一个其它的页面，刷新一下，然后再打开内容列表页面，这次不需要等待有可用的数据，可以打开这个页面，在等待数据的时候，useAsyncData 返回的数据里面，pending 这个属性的值会是 true，在组件的模板里面，我们判断了一下，如果 pending 是 true，就显示 加载中 ...

等有了可用数据以后，就又会显示利用这些数据制作的界面了。