写点什么

Vue3 中如何使用异步请求?

作者:Python研究所
  • 2022 年 6 月 29 日
  • 本文字数:1902 字

    阅读完需:约 6 分钟

1、前言

接上节,我们初步体验了 layui-vue 的用法。相比其他 ui 框架,layui-vue 的数据结构显得不是非常友好,但是经过数据拼凑也是能够成功运行的。


今天我们就主要介绍下在实际开发中最常用到的前后端接口交互。因为大多数时候前端为了高性能,对于后端接口的调用都会采用异步的方式。那该如何在 vue3 中使用异步请求渲染页面呢?

2、快速开始

2.1、思路

预期:前端急速响应、初始数据为空,异步接口响应后对页面数据表格进行响应式更新。


我们都知道 vue 的核心特性就是响应式,为了能够实现我们预期的效果,我们需要进行以下几步。


  1. 首先安装 axios

  2. 封装 axios

  3. 设计接口

  4. 在 vue 视图中将表格数据变量声明为响应式。初始化空值。

  5. 在 vue 视图中异步调用接口

  6. 将从后端获取到的数据 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 的异步请求后端并完成页面渲染。


\

发布于: 刚刚阅读数: 3
用户头像

公众号:Python研究所 2018.10.14 加入

云原生领域技术分享。

评论

发布
暂无评论
Vue3中如何使用异步请求?_6月月更_Python研究所_InfoQ写作社区