vue调用异步方法,vue3发送请求
Vue3增加了很多让人眼前一亮的特性，悬疑组件就是其中之一，对于处理异步请求数据非常实用。下面这篇文章主要介绍了在Vue3中如何使用异步请求的相关信息，有需要的可以参考一下。
目录
1、前言2、快速入门2.1、Idea 2.2、安装打包axios2.3、设计界面2.4、设计视图2.5、最终效果总结
1、前言
在上一节中，我们体验了layui-vue的用法。与其他ui框架相比，layui-vue的数据结构不是很友好，但是经过数据东拼西凑也能成功运行。
今天主要介绍一下实际开发中最常用的前端界面交互。因为大多数时候，前端异步调用后端接口是为了高性能。那么如何在vue3中使用异步请求渲染页面呢？
2、快速开始
2.1、思路
期望：前端快速响应，初始数据为空，异步接口有响应地响应并更新页面数据表。
我们都知道vue的核心特征是响应性。为了达到我们期望的效果，我们需要采取以下步骤。
首先安装axios包axios设计接口，在vue视图中将表格数据变量声明为响应式。初始化空值。在vue view中，异步调用接口将从后端获取的数据推送到响应变量中。
2.2、安装封装axios
安装axios
npm i axios -保存
封装axios
在src下创建一个新的request/svc.js，封装axios。
从“axios”导入axios
//设置超时。
axios.defaults.timeout=5000
//创建axios实例
const service=axios.create({
基本URL:“3358 localhost:8000”，//请求地址的所有前缀部分
超时：60000，//请求超时时间为毫秒
WithCredentials: true，//异步请求携带cookie。
标题：{
//设置后端需要的参数类型。
“内容类型”:“应用程序/json”，
令牌:您的令牌，
// X-Requested-With : XMLHttpRequest ，
},
})
//导出
导出默认服务
如上所述，我们简单地封装了axios，并且已经能够实现统一的URL、超时和请求头。
求拦截等后续解释。
2.3、设计接口
首先在src下新建一个API/bugs . js文件，然后设计一个方法(接口)调用后端接口。
//导入axios实例
从 @/request/svc 导入httpRequest
//获取错误信息
导出函数apiGetBugs() {
返回httpRequest({
url:“错误3”，
方法：“get”，
参数：{dd: xxx}，
})
}
如上，我们调用接口文件中封装的axios实例向后端接口发出请求，并返回请求的对应对象。
2.4、设计视图
有了以上基础，我们就可以在vue的视图中直接导入bugs.js中的接口，然后在实例的onMounted阶段异步调用接口，然后在接口返回时更新页面。
模板
！-上一节的内容-
Lay-button type=“主要”原始按钮/lay-button
Lay-button默认按钮/lay-button
Lay-button type=“正常”百搭按钮/lay-button
Lay-button type=warm warm按钮/lay-button
Lay-button type=危险警告按钮/lay-button
整点
！-本节内容-
lay-table:columns=“columns 1”:data source=“data source 1”/lay-table
/模板
脚本
//本节的内容
从“vue”导入{ onMounted，reactive }
从“@/API/bugs”导入{ apiGetBugs }
导出默认值{
setup() {
console.log(做点什么.)
//声明未声明的表单数据变量
让dataSource1=reactive([])
//在装载阶段异步调用接口
onMounted(async()={
让res=await apiGetBugs()
const ret=res.data
控制台. log(ret)
//将接口返回的数据推入响应变量
数据源1.push(.[{close:ret[0][0]，fixing:ret[0][1]，rejected:ret[0][2]，fixed:ret[0][3]，reopen:ret[0][4]}，])
})
//标头
常量列1=[
{
标题：“关闭”，
宽度：“200像素”，
按键：“关闭”
},
{
标题：“正在修复”，
宽度：“200像素”，
关键：“固定”
},
{
标题：“已拒绝”，
宽度：“200像素”，
关键：“拒绝”
},
{
标题：“已修复”，
宽度：“200像素”，
关键：“固定”
},
{
标题：“重新打开”，
宽度：“200像素”，
键：“重新打开”，
ellipsisTooltip:没错
}
]
//la yui-vue的完整表格数据结构
返回{
列1，
数据源1
}
}
}
/脚本
风格
/风格
2.5、最终效果
以上，我们已经完成了vue3的异步请求后端，完成了页面渲染。
总结
关于如何在Vue3中使用异步请求的文章到此结束。关于如何在Vue3中使用异步请求的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。