10. Nuxt3中的数据请求

有的小伙伴问了，Nuxt3 中还需要使用 axios 吗？这节我们就学习如何获取数据，Nuxt3 中提供了四种方法：useAsyncData 、useFetch 、useLazyFetch 、useLazyAsyncData 。提供的四个方法，都是获取后台数据的，但是使用场景和使用方法有所不同。

useAsyncData 的使用

使用useAsyncData 异步获取数据，它可以使用在页面中，组件和插件中。我们先通过这个方法来获取一下服务端的数据。 在 pages 文件夹下，新建一个页面，然后编写下面的代码。

<template>
  <div class=""></div>
</template>

<script setup>
import {} from "vue";

const res = await useAsyncData("getList", () =>
  $fetch("http://接口地址")
);
console.log(res);
</script>

<style scoped></style>

$fetch()方法是 nuxt3 提供的内置方法，我们直接可以使用。

写完后，可以打开浏览器的调试面板，在终端里可以看到返回值是一个对象，对象里有四个属性。

• data: 返回的数据，我们需要的服务器数据就在这个属性里。
• error：是否存在错误，如果存在错误，可以在这个属性中获得，返回的是一个对象。
• pending：这次请求的状态，返回的是布尔值。
• refresh：这个返回的是一个函数，可以用来刷新 handler 函数返回的数据。

这个方法的一个特点是，它可以进行很多选项的配置，但是在真实开发中，其实我们用的不多。最常用的就是lazy 选项，比如我们设置成true 就是需要数据都返回后，才会显示出来 ，简单说就是会阻塞页面。默认是 false。 比如要设置 lazy 为 true，就可以这样写。因为我们的数据太少，所以基本看不出来效果。

const res = await useAsyncData(
  "getList",
  () => $fetch("http://接口地址"),
  {
    lazy: true,
  }
);

这个可配置的选项option 其实还是挺多的，有七项。如果想详细了解的，可以到官方去看一下。

但这些选项在开发中很少被配置，一般都使用默认值。所以 Nuxt3 又提供了一个简单的方法useFetch 。

useFetch 的使用

useFetch 可以理解为所有的都选择默认配置的useAsyncData 方法。比如还是上面的请求，我们就可以写成下面的形式：

const res = await useFetch("http://接口地址");

这样我们依然可以获取数据，当然也是可以传递参数和配置请求方法的。比如我们要设置请求方法是 get，传递 id 是 1, 就可以写成下面的形式。

const res = await useFetch("http://接口地址", {
  method: "get",
  id: 1,
});

现在我们要把获取到的数据，显示在页面上。修改一下程序，定义变量，然后用ref来赋值就可以了。

<template>
  <div class="">{{ list }}</div>
</template>

<script setup>
import { ref } from "vue";

const res = await useFetch("http://接口地址");
const list = ref(res.data._rawValue.data);
console.log(res);
</script>

<style scoped></style>

这样就可以在页面上看到这些从后端得到的数据了。在实际开发中，我们会把这个数组循环输出，并制作一个精美的列表。

当我们会使用了useAsyncData 和 useFetch 这两个方法后，useLazyAsyncData 和useLazyFetch 也自然会使用了。他们只是把配置选项中的Lazy 设置成了 true， 也就是会阻塞页面。 我就不给小伙伴们重复演示这两个方法的使用了。