使用vue3中的异步

最新推荐文章于 2025-09-29 17:48:27 发布
原创 最新推荐文章于 2025-09-29 17:48:27 发布 · 3.7k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #ajax

在Vue3中遇到使用ajax请求数据时，由于setup前不支持async，导致返回值变为Promise。解决办法是在DOM渲染完成后发送请求，如在onMounted钩子中。然而，数据虽能正常获取，但响应式被破坏，页面未更新。将数据压入原有的响应式数组可解决此问题。

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

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

(getdata为封装的数据)

这样写完之后会发现

 

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

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

 

 

 

cvenginner
关注
vue异步请求(ts语法)
qq_36939013的博客
06-27 1620
<a @click="oneKeyDelete"></a> oneKeyDelete() { this.$confirm(`确认删除?`).then(async () => { let url = "/api/bombBombBomb/"; await axios.delete(url); ...
Vue——vue3 Suspense 异步请求的使用
qq_43201350的博客
01-06 405
Vue——vue3 Suspense 异步请求的使用
【Vue3】【笔记】----第八章：Vue3 异步请求与状态管理进阶（从基础到工程化）
最新发布
记录生活
09-29 1041
在 Vue3 项目中，异步请求（如调用后端接口获取数据）是核心需求，是最常用的 HTTP 客户端，它支持请求拦截、响应拦截、取消请求等功能，比原生fetch更易用、更强大。
Vue3中如何使用异步请求？
开源世界
06-14 5404
接上节，我们初步体验了layui-vue的用法。相比其他ui框架，layui-vue的数据结构显得不是非常友好，但是经过数据拼凑也是能够成功运行的。 今天我们就主要介绍下在实际开发中最常用到的前后端接口交互。因为大多数时候前端为了高性能，对于后端接口的调用都会采用异步的方式。那该如何在vue3中使用异步请求渲染页面呢？2.1、思路 预期：前端急速响应、初始数据为空，异步接口响应后对页面数据表格进行响应式更新。 我们都知道vue的核心特性就是响应式，为了能够实现我们预期的效果，我们需要进行以下几步。首先安装a
vue3 Suspense 异步请求组件使用
pz1021的博客
03-03 2165
Suspense 异步请求组件使用 前端开发中异步请求是非常常见的事情,比如远程读取图片,调用后端接口等等,在vue2 中判断异步状态是一件必要的事情,但是这些状态都要自己处理,于是在3中提供了suspense函数 suspense中文含义是悬念的意思 Suspense是有两个template插槽的，第一个default代表异步请求完成后，显示的模板内容。fallback代表在加载中时，显示的模板内容。 写一个异步请求加载显示的组件 <template> <h1>{{result
vue3 异步组件
秋来九月八
10-24 5415
前端开发经常遇到异步的问题，请求函数，链接库，等，都有可能需要通过promise或者async await 来进行异步的一个封装。 异步组件也由此诞生，我用settimeout来模拟一个vue3的异步组件
Vue异步组件使用详解
08-30
Vue.js 是一款流行的前端框架，它提供了一种强大的特性...总的来说，Vue异步组件是一个强大的特性，它能帮助开发者优化应用性能，提高用户体验。熟练掌握异步组件的使用，对于构建高效、响应迅速的Vue应用至关重要。
vue3中异步组件的使用
peanut
12-31 1059
vue3的异步组件主要依靠defineAsyncComponent来实现。 <template> <AsyncComponent/> </template> <script> import { defineAsyncComponent } from "vue"; // 使用defineAsyncComponent方法 定义异步组件 const AsyncComponent = defineAsyncComponent( {
Vue项目中异步组件的引入使用
Niucode的博客
04-26 976
Vue项目中异步组件的引入使用
vue在使用ECharts时的异步更新和数据加载详解
08-28
本文将详细介绍如何在 Vue 中使用 ECharts 实现异步更新和数据加载。 一、准备 ECharts 环境 首先，我们需要将 ECharts.js 引入到我们的 Vue 项目中，可以通过在入口 html 文件中添加以下代码： ```html ...
vue3异步组件
徐同保的专栏
08-02 540
vue3异步组件
vue3+ts 异步组件的使用
weixin_45932157的博客
11-22 296
【代码】异步组件的使用。
vite+ts+vue3 知识点（异步组件）
微光无限的博客
12-06 611
vite+ts+vue3 知识点（异步组件，性能优化）
搞懂Vue3中的异步组件，看这篇就够了
一碗周
02-11 8474
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 异步组件 写在前面 当我们的项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载；这样的做得目的可以很好的提高用户体验。 为了实现这个功能，Vue3中为我们提供了一个方法，即defineAsyncComponent，这个方法可以传递两种类型的参数，分别是函数类型和对象类型，接下来我们分别学习。 传递工厂函数作为参数 defineAsyncComponent方法接收一个工厂函.
Vue 3 defineAsyncComponent 思考
Web_boom的博客
01-16 1088
接受一个返回Promise的工厂函数。当我们成功地从服务器获取组件时，这个Promise应该会被resolve，如果出现错误则会被reject。要使用它，我们必须从Vue中导入它，然后才能在脚本的其余部分中使用它。我们也可以使用工厂函数中的import，轻松地从其他文件中添加Vue组件。// 简单使用这是使用的最简单方法，但我们也可以传入一个完整的选项对象，配置几个更高级的参数。
Vue 3.0 动态组件&异步组件 【Vue3 从零开始】
2201_75866484的博客
02-27 848
该页面假设你已经阅读过了。如果你还对组件不太了解，推荐你先阅读它。
【VUE】vue3学习笔记（异步组件，包含defineAsyncComponent、Suspense的使用）
编码世界
09-30 2358
按需引入，用到的时候再加载，异步组件的引入需要用`defineAsyncComponent`进行注册。 `defineAsyncComponent`工厂函数需要返回一个Promise对象，接收对象类型，对异步函数进行设置。
VUE3 处理异步请求数据 shallowReactive
yinyujie12的博客
02-27 1458
文章目录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中使用异步组件
02-16
### 如何在 Vue 3 中使用异步组件 在 Vue 3 中，可以利用 `defineAsyncComponent` 函数来定义异步加载的组件。这有助于优化应用性能，通过按需加载减少初始页面加载时间。 对于创建一个简单的异步组件，代码如下所...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值