Vue3 中如何使用异步请求?
1、前言
接上节,我们初步体验了 layui-vue 的用法。相比其他 ui 框架,layui-vue 的数据结构显得不是非常友好,但是经过数据拼凑也是能够成功运行的。
今天我们就主要介绍下在实际开发中最常用到的前后端接口交互。因为大多数时候前端为了高性能,对于后端接口的调用都会采用异步的方式。那该如何在 vue3 中使用异步请求渲染页面呢?
2、快速开始
2.1、思路
预期:前端急速响应、初始数据为空,异步接口响应后对页面数据表格进行响应式更新。
我们都知道 vue 的核心特性就是响应式,为了能够实现我们预期的效果,我们需要进行以下几步。
首先安装 axios
封装 axios
设计接口
在 vue 视图中将表格数据变量声明为响应式。初始化空值。
在 vue 视图中异步调用接口
将从后端获取到的数据 push 到响应式变量中。
2.2、安装 &封装 axios
安装 axios
封装 axios
在src
下新建request/svc.js
,并对 axios 进行封装
如上,我们对 axios 进行简单的封装,已经能够实现统一 URL、超时时间和请求头。
关于请求拦截等后续再进行讲解。
2.3、设计接口
首先在src
下新建apis/bugs.js
文件,然后设计一个方法(接口)去调用后端接口。
如上,我们在接口文件中调用封装的 axios 实例对后端的接口发起请求,并将请求相应对象返回。
2.4、设计视图
有了上面的基础,我们可以在 vue 的视图中直接导入 bugs.js 中的接口,然后在实例的 onMounted 阶段去异步调用接口,当接口返回后再去更新页面。
2.5、最终效果
以上,我们就完成了 vue3 的异步请求后端并完成页面渲染。
\
版权声明: 本文为 InfoQ 作者【Python研究所】的原创文章。
原文链接:【http://xie.infoq.cn/article/4d6c426bfcde75adf208479fa】。文章转载请联系作者。
评论