Vue3中如何使用异步请求示例详解
作者:Python研究所 发布时间:2024-04-27 16:04:56
标签:vue3,异步,请求
1、前言
接上节,我们初步体验了layui-vue的用法。相比其他ui框架,layui-vue的数据结构显得不是非常友好,但是经过数据拼凑也是能够成功运行的。
今天我们就主要介绍下在实际开发中最常用到的前后端接 * 互。因为大多数时候前端为了高性能,对于后端接口的调用都会采用异步的方式。那该如何在vue3中使用异步请求渲染页面呢?
2、快速开始
2.1、思路
预期:前端急速响应、初始数据为空,异步接口响应后对页面数据表格进行响应式更新。
我们都知道vue的核心特性就是响应式,为了能够实现我们预期的效果,我们需要进行以下几步。
首先安装axios
封装axios
设计接口
在vue视图中将表格数据变量声明为响应式。初始化空值。
在vue视图中异步调用接口
将从后端获取到的数据push到响应式变量中。
2.2、安装&封装axios
安装axios
npm i axios --save
封装axios
在src
下新建request/svc.js
,并对axios进行封装
import axios from 'axios'
// 设置超时时间
axios.defaults.timeout = 5000
// 创建axios实例
const service = axios.create({
baseURL: 'http://localhost:8000', // 所有的请求地址前缀部分
timeout: 60000, // 请求超时时间毫秒
withCredentials: true, // 异步请求携带cookie
headers: {
// 设置后端需要的传参类型
'Content-Type': 'application/json',
'token': 'your token',
// 'X-Requested-With': 'XMLHttpRequest',
},
})
// 导出
export default service
如上,我们对axios进行简单的封装,已经能够实现统一URL、超时时间和请求头。
关于请求拦截等后续再进行讲解。
2.3、设计接口
首先在src
下新建apis/bugs.js
文件,然后设计一个方法(接口)去调用后端接口。
// 导入axios实例
import httpRequest from '@/request/svc'
// 获取BUG信息
export function apiGetBugs() {
return httpRequest({
url: 'bug3',
method: 'get',
params: {'dd': 'xxx'},
})
}
如上,我们在接口文件中调用封装的axios实例对后端的接口发起请求,并将请求相应对象返回。
2.4、设计视图
有了上面的基础,我们可以在vue的视图中直接导入bugs.js中的接口,然后在实例的onMounted阶段去异步调用接口,当接口返回后再去更新页面。
<template>
<!-- 上节的内容 -->
<lay-button type="primary">原始按钮</lay-button>
<lay-button>默认按钮</lay-button>
<lay-button type="normal">百搭按钮</lay-button>
<lay-button type="warm">暖色按钮</lay-button>
<lay-button type="danger">警告按钮</lay-button>
<hr>
<!-- 本节内容 -->
<lay-table :columns="columns1" :dataSource="dataSource1"></lay-table>
</template>
<script>
// 本节内容
import { onMounted,reactive } from 'vue'
import { apiGetBugs } from '@/apis/bugs'
export default {
setup() {
console.log('do something...')
// 声明表格数据变量未声明式
let dataSource1=reactive([])
// 挂载阶段异步调用接口
onMounted(async()=>{
let res = await apiGetBugs()
const ret = res.data
console.log(ret)
// 将接口返回的数据push到响应式变量中
dataSource1.push(...[{close:ret[0][0],fixing:ret[0][1],refused:ret[0][2],fixed:ret[0][3],reopen:ret[0][4]},])
})
// 表头
const columns1 = [
{
title:"关闭",
width:"200px",
key:"close"
},
{
title:"修复中",
width:"200px",
key:"fixing"
},
{
title:"拒绝",
width:"200px",
key:"refused"
},
{
title:"已修复",
width:"200px",
key:"fixed"
},
{
title:"重新打开",
width:"200px",
key:"reopen",
ellipsisTooltip: true
}
]
// 完整的layui-vue的表格数据结构
return {
columns1,
dataSource1
}
}
}
</script>
<style>
</style>
2.5、最终效果
以上,我们就完成了vue3的异步请求后端并完成页面渲染。
来源:https://juejin.cn/post/7108605278953668639
0
投稿
猜你喜欢
- 在今天的设计中,排版常常被忽视,特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说,我们被局限于某
- python包含子目录中的模块方法比较简单,关键是能够在sys.path里面找到通向模块文件的路径。下面将具体介绍几种常用情况:(1)主程序
- 一:导入pmo.xm配置包mysql库连接、druid连接池、mybatis组件<!-- 使用MySQL数据库--> <d
- 日志文件一般是按天产生,则通过在程序中判断文件的产生日期与当前时间,更换监控的日志文件程序只是简单的示例一下,监控test1.log 10秒
- 行向量方式1import numpy as npb=np.array([1,2,3]).reshape((1,-1))print(b,b.s
- 创作背景最近本人在 PyCharm 的虚拟环境安装第三方库的时候报了错,说 no such option: --bulid-dir ,如下图
- 1. 什么是XSLT 大家可能听说过XSL(eXtensible Stylesheet Language),XSL和我们这里说的XSLT从狭
- 今天我遇到一个问题,MySQL企业版备份引起I/O子系统负载过大,应用响应缓慢,导致系统不可用。所以我想限制mysqlbackup的进程,使
- 一、简介pydantic 库是 python 中用于数据接口定义检查与设置管理的库。pydantic 在运行时强制执行类型提示,并在数据无效
- 前言:Python 3最重要的新特性之一是对字符串和二进制数据流做了明确的区分。文本总是Unicode,由str类型表示,二进制数据则由by
- 1、简介:Oracle的sql*plus是与oracle进行交互的客户端工具。在sqlplus中,可以运行sqlplus命令与sqlplus
- 在pandas中创建category类型数据的几种方法之详细攻略 T1、直接创建 category类型数据可知,在category
- “自定义函数”是我们平常的说法,而“用户定义的函数”是 SQL Server 中书面的说法。 SQL Server 2000 允许用户创建自
- 问题现在有多个字典或者映射,你想将它们从逻辑上合并为一个单一的映射后执行某些操作,比如查找值或者检查某些键是否存在。解决方案加入你有如下两个
- 前言:项目的成就感来源于大家~~必须先感谢一切该感谢的人!(旁白:写了很多次设计实录分享,这次是最百感交集的一次,话多这习惯还大家海涵~嘻嘻
- 初始化array实例化可以提供一个参数来描述允许那种数据类型,还可以有一个初始的数据序列存储在数组中。import arrayimport
- 前言本文主要给大家介绍了关于python中用Future对象回调别的函数的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的
- python提供了json包来进行json处理,json与python中数据类型对应关系如下:一个python object无法直接与jso
- 其实这个问题落伍谈了n次了其中care4也说了两次所以如果你有问题最好先搜索一下 说不定问题早有人解决了http://www.im286.c
- 本文实例讲述了Python线性拟合实现函数与用法。分享给大家供大家参考,具体如下:1. 参考别人写的:#-*- coding:utf-8 -