Vue3中如何使用异步请求？_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
复制代码
1
2

封装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
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

如上，我们对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'},
    })
}
复制代码
1
2
3
4
5
6
7
8
9
10
11
12

如上，我们在接口文件中调用封装的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>
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

2.5、最终效果

以上，我们就完成了vue3的异步请求后端并完成页面渲染。

源码附件已经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

开源地址
码云地址：
http://github.crmeb.net/u/defu

Github 地址：
http://github.crmeb.net/u/defu

开源不易，Star 以表尊重，感兴趣的朋友欢迎 Star，提交 PR，一起维护开源项目，造福更多人！