使用vue3中的异步

最新推荐文章于 2025-06-15 09:29:59 发布
最新推荐文章于 2025-06-15 09:29:59 发布
阅读量3.7k 收藏 11
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript 前端 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cvenginner/article/details/122850109
在Vue3中遇到使用ajax请求数据时，由于setup前不支持async，导致返回值变为Promise。解决办法是在DOM渲染完成后发送请求，如在onMounted钩子中。然而，数据虽能正常获取，但响应式被破坏，页面未更新。将数据压入原有的响应式数组可解决此问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在vue3中使用ajax请求数据的时候，由于不能在setup前面使用async，使用后会导致return的返回值全部变成promise的返回值，所以在执行的时候得使用一些特定的钩子来发送请求

和vue2一样，选择在dom节点渲染完成的时候发送请求，

(getdata为封装的数据)

这样写完之后会发现

 

页面显示没有数据，但是tableData却可以显示数来数据，但是因为vue的承诺是相应式数据发生改变，页面就会重新渲染，所以是tabledata的响应式被替换成了不能响应的数据

把数据压入原来的设置成响应式的数组就可以检测到了

 

 

 

cvenginner
关注
vue异步请求(ts语法)
qq_36939013的博客
06-27 1593
<a @click="oneKeyDelete"></a> oneKeyDelete() { this.$confirm(`确认删除?`).then(async () => { let url = "/api/bombBombBomb/"; await axios.delete(url); ...
浅谈 Vue3的计算属性 Computed(如何在 Vue3 中异步使用 computed 计算属性)
weixin_55896343的博客
05-16 2670
*第一种解决办法：**我不能就不用计算属性，写一个异步函数 调接口取数据，可以创建一个 reactive 对象或 ref 引用，然后在组件 onMounted 生命周期手动为这个对象赋值。我 最近接到了一个任务，该原理之前的代码，要在计算属性里面 调接口取数据，可能不明白的小伙伴 就会问，为什么可以在computed里面调接口呢？是的 ，不能在计算属性里面调接口，Vue3的计算属性也是 组合式API，我平时再用的时候，只用到了get很少用 set。我在网上找一到了一篇博客，可以取看下。
vue3 Suspense 异步请求组件使用
pz1021的博客
03-03 2124
Suspense 异步请求组件使用 前端开发中异步请求是非常常见的事情,比如远程读取图片,调用后端接口等等,在vue2 中判断异步状态是一件必要的事情,但是这些状态都要自己处理,于是在3中提供了suspense函数 suspense中文含义是悬念的意思 Suspense是有两个template插槽的，第一个default代表异步请求完成后，显示的模板内容。fallback代表在加载中时，显示的模板内容。 写一个异步请求加载显示的组件 <template> <h1>{{result
Vue3 Hook异步数据获取问题解析
BillKu的博客
06-15 624
hook：组件中使用：控制台打印的内容：分析：在您提供的代码中，打印为空的原因是由于。
vue3 异步组件
秋来九月八
10-24 5340
前端开发经常遇到异步的问题，请求函数，链接库，等，都有可能需要通过promise或者async await 来进行异步的一个封装。 异步组件也由此诞生，我用settimeout来模拟一个vue3的异步组件
vue3+ts 异步组件的使用
weixin_45932157的博客
11-22 279
【代码】异步组件的使用。
vite+ts+vue3 知识点（异步组件）
微光无限的博客
12-06 593
vite+ts+vue3 知识点（异步组件，性能优化）
Vue异步组件使用详解
08-30
Vue.js 是一款流行的前端框架，它提供了一种强大的特性...总的来说，Vue异步组件是一个强大的特性，它能帮助开发者优化应用性能，提高用户体验。熟练掌握异步组件的使用，对于构建高效、响应迅速的Vue应用至关重要。
深入浅出 Vue2 和 Vue3 中的异步组件与懒加载
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
12-28 1385
随着现代前端应用的复杂性增加，性能优化成为了开发者关注的重点之一。异步组件和懒加载（Lazy Loading）是目前最常见的性能优化技术之一，通过将组件按需加载，能够显著减小初次加载的包体积，从而提高用户体验。在 Vue.js 中，异步组件不仅能够有效提升页面加载速度，还能提升应用的响应性。本文将详细讲解 Vue2 和 Vue3 中如何使用异步组件以及懒加载，并对比两者的异同之处，帮助你更好地理解异步组件的实现方式以及如何在项目中优化其使用。
vue3中异步组件的使用
peanut
12-31 1041
vue3的异步组件主要依靠defineAsyncComponent来实现。 <template> <AsyncComponent/> </template> <script> import { defineAsyncComponent } from "vue"; // 使用defineAsyncComponent方法 定义异步组件 const AsyncComponent = defineAsyncComponent( {
Vue3 中异步组件加载失败如何处理？.doc
最新发布
07-16
在Vue3中，异步组件的加载失败处理是一个重要环节，尤其是在提升应用性能和响应速度方面。异步组件通过仅在需要时才加载组件，有效减轻了页面加载负担。但在这个过程中，可能会出现加载失败的情况，具体原因包括网络...
Vue——vue3 Suspense 异步请求的使用
qq_43201350的博客
01-06 376
Vue——vue3 Suspense 异步请求的使用
搞懂Vue3中的异步组件，看这篇就够了
一碗周
02-11 8181
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 异步组件 写在前面 当我们的项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载；这样的做得目的可以很好的提高用户体验。 为了实现这个功能，Vue3中为我们提供了一个方法，即defineAsyncComponent，这个方法可以传递两种类型的参数，分别是函数类型和对象类型，接下来我们分别学习。 传递工厂函数作为参数 defineAsyncComponent方法接收一个工厂函.
Vue 3 defineAsyncComponent 思考
Web_boom的博客
01-16 1065
接受一个返回Promise的工厂函数。当我们成功地从服务器获取组件时，这个Promise应该会被resolve，如果出现错误则会被reject。要使用它，我们必须从Vue中导入它，然后才能在脚本的其余部分中使用它。我们也可以使用工厂函数中的import，轻松地从其他文件中添加Vue组件。// 简单使用这是使用的最简单方法，但我们也可以传入一个完整的选项对象，配置几个更高级的参数。
Vue 3.0 动态组件&异步组件 【Vue3 从零开始】
2201_75866484的博客
02-27 829
该页面假设你已经阅读过了。如果你还对组件不太了解，推荐你先阅读它。
【VUE】vue3学习笔记（异步组件，包含defineAsyncComponent、Suspense的使用）
编码世界
09-30 2331
按需引入，用到的时候再加载，异步组件的引入需要用`defineAsyncComponent`进行注册。 `defineAsyncComponent`工厂函数需要返回一个Promise对象，接收对象类型，对异步函数进行设置。
VUE3 处理异步请求数据 shallowReactive
yinyujie12的博客
02-27 1440
文章目录VUE3 处理异步请求数据 shallowReactivevue3官网 shallowReactive 说明示例 VUE3 处理异步请求数据 shallowReactive vue3官网 shallowReactive 说明 [(响应性基础 API | Vue.js (vuejs.org))] 示例 <script setup> import {shallowReactive} from 'vue' import Axios from 'axios' const data = shal
vue3 async封装axios
weixin_45599105的博客
07-05 576
vue3 async封装axios
vue3异步组件中使用loading
02-28
### 使用 Vue 3 实现异步组件并添加加载状态 在 Vue 3 中，`Suspense` 组件用于包裹异步组件，并提供一种优雅的方式来处理加载状态。当内部的异步依赖未解析时，会渲染 `fallback` 属性指定的内容作为占位符。 #### 定义异步组件 通过定义一个返回 Promise 的函数来创建异步组件： ```javascript const AsyncComponent = defineAsyncComponent(() => import(&#39;./components/MyComponent.vue&#39;)) ``` 此方法允许延迟加载组件直到实际需要它们为止[^1]。 #### 结合 Suspense 和 Loading 状态 为了展示加载过程中的反馈给用户，在模板中使用 `<suspense>` 标签，并设置其 `#default` 插槽为正常情况下应呈现的内容以及 `#fallback` 插槽为正在加载期间显示的信息或动画。 ```html <template> <suspense> <!-- 加载完成后的视图 --> <template #default> <async-component /> </template> <!-- 正处于加载状态下的视图 --> <template #fallback> <div>Loading...</div> <!-- 可替换为更复杂的加载指示器 --> </template> </suspense> </template> <script setup> import { defineAsyncComponent } from &#39;vue&#39; // 动态导入组件 const AsyncComponent = defineAsyncComponent(() => import(&#39;@/path/to/component&#39;) ) </script> ``` 上述代码展示了如何利用 `defineAsyncComponent()` 函数配合动态 `import()` 来声明按需加载的组件实例；同时借助于 `<suspense>` 元素实现了简单的加载提示逻辑[^2]。 此外，采用这种方式不仅可以改善应用启动速度，还能显著提升整体性能体验，因为只有真正被访问到的部分才会被执行编译和挂载操作[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值