Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Nuxt3 数据请求 useAsyncData/useFetch

Nuxt3 数据请求 useAsyncData/useFetch

原创
作者头像
KID.
修改于 2023-10-30 06:37:51
修改于 2023-10-30 06:37:51
4.3K0
举报

配置SSR

Nuxt3 默认首屏SSR,由服务端渲染,可以通过配置 ssr:false 来取消服务端渲染

nuxt.config.ts

代码语言:txt
AI代码解释
复制
export default defineNuxtConfig({
  devtools: { enabled: true },
 // ssr:false, //页面全部为客户端渲染
  routerRules:{ // 指定路由页面为客户端渲染
      '/home': {
          ssr:false
      }
  }
})

数据请求

根据vue 的声明周期,只有 setup beforeCreate Created**里的内容会在服务端执行,所以如果是首屏服务端渲染时,需要将获取数据方法写到这几个生命周期之中**

Nuxt3 有封装好的$fetch方法做数据请求,可以不需要引入第三方axios或者fetch做数据请求,可能会出现多个请求数据混乱问题


下列情况都是不需要跨域的请求,服务端和客户端不需要做其他配置代理就可以请求的内容

useAsyncData && useLazyAsyncData

useAsyncData 需要结合 $fetch 来使用,且要 传入一个唯一的key值,防止请求过多数据混乱,lazy默认为false ,会在从别的页面跳转进来时阻塞路由跳转 即:需要先请求完后路由才会切换

useLazyAsyncData 的lazy默认为true 不需要再额外写配置

代码语言:txt
AI代码解释
复制
<template>
  <div>
    <div v-for="item of list" :key="item.name">
      {{ item.name }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const list = ref([])
const { data } = await useAsyncData(
  'id', // 需要输入唯一ID
  () =>
    $fetch('https://xxx.xxx.com', {
      headers: {
        ...
      }
    }),
  {
    pick: ['data'], // 选择返回对象中想要的属性
    // lazy: false, // 这里默认为false 会阻塞路由渲染,(一定要等到数据请求回来后才会跳转路由)
    lazy: true // 不会阻塞路由跳转,但是会导致跳转后无数据,需要通过watch监听数据后赋值
  }
)
 // 不可以去掉,否则首屏加载会报错
list.value = data.value
watch(data, () => {
  list.value = data.value
})
</script>

这里获取数据最开始是空数组,请求数据后将内容赋值,使用lazy后会导致最开始数据没有,进入页面请求数据不加载,这里可以使用 watch监听返回内容,改变时赋值。

也可以不做赋值处理,直接将取出的内容解构 用于页面渲染,就可以不需要监听

代码语言:txt
AI代码解释
复制
<template>
  <div>
    <div v-for="item of data" :key="item.name">
      {{ item.name }}
    </div>
  </div>
</template>
<script setup lang="ts">

const { data } = await useAsyncData(
  'id', // 需要输入唯一ID
  () =>
    $fetch('https://xxx.xxx.com', {
      headers: {
        ...
      }
    }),
  {
    pick: ['data'], // 选择返回对象中想要的属性
    // lazy: false, // 这里默认为false 会阻塞路由渲染,(一定要等到数据请求回来后才会跳转路由)
    lazy: true // 不会阻塞路由跳转,但是会导致跳转后无数据,需要通过watch监听数据后赋值
  }
)

</script>

useFetch && useLaztFetch

相当于useAsyncData的 语法糖,不需要写$fetch也不需要传入唯一id

useLaztFetch 就是 默认将lazy设置为true ,

写法相对简单

代码语言:txt
AI代码解释
复制
const { data } = await useFetch(
  'https://xxx.xxx.com',
  {
    headers: {
     ...
    },
    transform: (res: any) => res.data.films, // 返回内容过多可以筛选 想要的返回内容
    // lazy: false, // 这里默认为false 会阻塞路由渲染,(一定要等到数据请求回来后才会跳转路由)
    lazy: true // 不会阻塞路由跳转,但是会导致跳转后无数据,需要通过watch监听数据后赋值
  }
)

</script>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【死磕Java并发】----- 死磕 Java 并发精品合集
【死磕 Java 并发】系列是 LZ 在 2017 年写的第一个死磕系列,一直没有做一个合集,这篇博客则是将整个系列做一个概览。
用户1655470
2018/08/03
1.2K0
【死磕Java并发】----- 死磕 Java 并发精品合集
三万文字搞定基础面试:Java 并发包(JUC)及应用场景
工作做螺丝钉,面试造火箭,我想这个是每个程序员比较头疼的事情,但是又有必须经历的流程,尤其是 JDK 基础。本文会从系统思维的角度,将 JUC 的高频面试题,从因果关系层次串联起来(思维导图),便于加强记忆深度。
35岁程序员那些事
2022/09/23
9570
三万文字搞定基础面试:Java 并发包(JUC)及应用场景
如何才能够系统地学习Java并发技术?
这里不仅仅是指使用简单的多线程编程,或者使用juc的某个类。当然这些都是并发编程的基本知识,除了使用这些工具以外,Java并发编程中涉及到的技术原理十分丰富。为了更好地把并发知识形成一个体系,也鉴于本人目前也没有能力写出这类文章,于是参考几位并发编程方面专家的博客和书籍,做一个简单的整理。
Bug开发工程师
2019/07/12
3410
如何才能够系统地学习Java并发技术?
JAVA并发编程系列(6)ReentrantLock核心原理剖析
ReentrantLock英文翻译以及顾名思义:可重入锁。之前文章说过,还有synchronized也是可重入锁。竟然JDK最开始有了synchronized这个可重入锁,而且JDK1.6之后也对synchronized进行锁优化,性能堪比JUC里的其他Lock()。为什么还提供了ReentrantLock呢?在《JAVA并发编程volatile核心原理》文中开头我们就简单的列了synchronized的几个缺点,包括:阻塞时间过长,不可中断、是非公平锁。
拉丁解牛说技术
2024/09/12
1660
3分钟速读原著《Java并发编程的艺术》(三)
第5章 Java中的锁 本章主要介绍Java并发包当中与锁相关的API和组件 1.Lock接口 1.1 锁就是用来控制多个线程访问共享资源的方式,简单来说,一个锁能够防止多个线程同时访问共享资源,Lock接口出现的比synchronized要晚一些,java5之后才开始出现的,使用的时候是属于显示的获取锁和释放锁,简单来说就是需要手动的去加锁和解锁,相比之下synchronized是隐式锁,synchronized简化了同步锁的管理,但是拓展性并没有显示的锁获取和释放来得好 1.2 Lock使用一般都是搭
cwl_java
2019/10/26
3190
架构面试题汇总:并发和锁(三)
以下面试题涵盖了Java中的锁机制、并发工具类、内存模型、可见性、原子性、有序性等方面。通过这些问题,可以展示自己对Java并发编程的深入理解和实践经验。请注意,并发编程是一个复杂而深入的领域,需要不断学习和实践。
公众号:码到三十五
2024/03/19
2250
Java并发编程(5)- J.U.C之AQS及其相关组件详解
Java并发包(JUC)中提供了很多并发工具,这其中,很多我们耳熟能详的并发工具,譬如ReentrangLock、Semaphore,而它们的实现都用到了一个共同的基类--AbstractQueuedSynchronizer(抽象队列同步器),简称AQS。
端碗吹水
2020/09/23
6020
Java并发编程(5)- J.U.C之AQS及其相关组件详解
大厂面试系列(三):并发编程
并发编程 多线程类的使用 java线程同步有哪些方法、各自的优缺点 synchronized 和ReentrantLock区别,可重入锁是什么? threadlocal有什么用 Java中创建线程有几种方式?分别是?当主线程执行结束后,子线程还会继续执行下去吗? JUC中有哪些常用的集合?(项目中用到的) CopyOnWriteArrayList的实现原理?主要应用什么场景下?优缺点分别是? HashMap不是线程安全的,在高并发环境中做插入会出现什么情况?为什么? jdk1.8以前ConcurrentHa
zhaozhen
2021/07/15
5010
Java 并发编程·Java 并发
可能正在运行,也可能正在等待 CPU 时间片。包含了操作系统线程状态中的 Running 和 Ready。
数媒派
2022/12/01
2.8K0
Java并发编程快速学习
上周的面试中,被问及了几个关于Java并发编程的问题,自己回答的都不是很系统和全面,可以说是“头皮发麻”,哈哈。因此果断购入《Java并发编程的艺术》一书,学习后的体会是要想快速上手Java并发编程,
用户1216676
2018/01/24
7800
Java并发编程与高并发之线程并发容器
1、并发容器及安全共享策略总结,并发容器J.U.C(即java.util.concurrent)。J.U.C同步器AQS。
别先生
2020/02/18
1.6K0
Java并发知识点快速复习手册(上)
调用 Thread.sleep() 方法使线程进入限期等待状态时,常常用“使一个线程睡眠”进行描述。
蛮三刀酱
2019/03/26
5240
Java并发知识点快速复习手册(上)
Java 并发编程实战详解:线程、线程池与锁机制
现代计算机大多是多核处理器,利用并发编程能提升程序吞吐量与响应速度。Java 提供了非常完善的并发工具集,涵盖从基础线程到高级并发类库,帮助开发者构建高性能、线程安全的程序。
用户11690571
2025/06/06
1290
Java 并发编程实战详解:线程、线程池与锁机制
Java并发组件浅析
Java并发相关组件或者技术包括:线程、线程池、阻塞队列、Future/FutureTask、Lock/Condition、Lock、AQS(队列同步器)、并发工具类、原子更新类、LockSupport、Unsafe等,下面我们以总体视角来看下这些组件之间的依赖关系。
luoxn28
2021/05/13
9170
Java并发组件浅析
JAVA高并发编程「建议收藏」
可用来给对象和方法或者代码块加锁,当它锁定一个方法或者一个代码块的时候,同一时刻最多只有一个线程执行这段代码。可能锁对象包括: this, 临界资源对象,Class 类对象
全栈程序员站长
2022/08/31
4830
JAVA高并发编程「建议收藏」
Java并发编程实战指南:JUC核心类、线程池、线程安全集合与死锁破解
JUC即java.util.concurrent是Java的一个包,下面有非常多的并发编程相关的类。
小皮侠
2024/10/24
5050
Java并发编程实战指南:JUC核心类、线程池、线程安全集合与死锁破解
JUC并发编程
并发编程是指多个线程同时执行程序的情况。在并发编程中,由于多个线程可能同时访问共享资源,因此需要考虑线程同步、原子性、可见性等问题。
一只
2024/06/26
880
JUC并发编程(一)多线程使用和线程池
一个进程往往可以包含多个线程,至少包含一个! Java默认有几个线程? 2 个: mian、GC 对于Java而言:Thread、Runnable、Callable 三种实现线程的方式。 JAVA不能开启线程,是调用本地方法,查看start方法可以看到底层是C++来开启线程的
HcodeBlogger
2020/07/14
7630
JUC并发编程(一)多线程使用和线程池
JAVA并发万字长文从ReentrantLock到juc框架
ReentrantLock 是 Java 中的可重入锁,它实现了 Lock 接口,与 synchronized 相比,ReentrantLock提供了更强大和灵活的锁机制。
青山师
2023/05/02
2610
JAVA并发万字长文从ReentrantLock到juc框架
推荐阅读
相关推荐
【死磕Java并发】----- 死磕 Java 并发精品合集
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档