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, 也就是会阻塞页面。 我就不给小伙伴们重复演示这两个方法的使用了。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 10. Nuxt3中的数据请求

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们