Vue3+Vite+TypeScript+element Plus框架搭建过程（3）

代码地址，request分支：https://gitee.com/lsjWeiYi/vue3-frame/tree/request/

web到此还缺一个http请求功能，然后就可以实现功能了。

当前http请求基本都使用axios，然后我发现官方还为框架提供了封装，vue-axios，但是网上资料很少，估计是大部人都是在网上借鉴别人实现得工具类。我也一样。

但是我还是尝试使用框架的工具类，我测试功能是正常的，下面介绍下整个流程。

在package.json添加依赖：

"axios": "^0.26.0",
"vue-axios": "^3.4.1",

实现http请求的工具类：

首先type.ts:

// 接收response的对象类
export interface IResponseData<T> {status: number;message?: string;data: T;code: string;
}

然后axios配置类index.ts：

import axios from "axios";
import { AxiosRequestConfig, AxiosResponse } from "axios";// axios配置在此实现
export const axiosConfig = function () {axios.defaults.baseURL = "http://localhost:10001/"; // 设置服务端地址axios.defaults.timeout = 3000; // 设置超时时间axios.interceptors.request.use( // 请求中间件(config: AxiosRequestConfig) => {/*** 实现自己的业务逻辑* 1.开启全屏加载动画之类* 2.数据加密config。data* 3.给请求头添加信息等（token 结合sessionStorage，localStorage,vuex这些）**/return config;},(error) => {/* 请求错误的业务逻辑1. 关闭全屏loading动画2. 重定向到错误页*/return Promise.reject(error); // 为了可以在代码中catch到错误信息}); //end request.useaxios.interceptors.response.use( // 响应中间件(response: AxiosResponse) => {/* 1. 关闭全屏loading动画2. 数据解密3. 根据 response.data.code 做不同的错误处理4. ……*/return response;},(error) => {return Promise.reject(error);}); //end response.use
};

再之后是工具类具体实现request.ts:

import axios from "axios";
import { IResponseData } from "./type";// 实现gey方法
// 这里采用泛型T实现，能够达到数据直接解析成对应的对象
export function get<T>(url: string, params?: any): Promise<IResponseData<T>> {return axios.get(url, params);
}// 实现post方法
export function post<T>(url: string, params: any): Promise<IResponseData<T>> {return axios.post(url, params);
}
// 其他方法可自己拓展

最后还需要在main.ts注册启用：

import axios from 'axios'
import VueAxios from 'vue-axios'
import { axiosConfig } from './utils/http'
......此处省略无关代码
axiosConfig() // 加载axios配置
app.use(VueAxios, axios).mount('#app') // 此处省略其他插件

到此就可以使用了，这种实现方式我认为有两个特点：

泛型可以将数据直接解析成对应的数据结构体
全局唯一axios变量，在其他文件import axios使用的都是同一个对象

使用测试

为了简单，我直接在App.vue进行测试，这里的前提是我在后台实现了一个get接口http://localhost:10001/v2/health，它的返回值是{“version”:“v2”}。

然后看代码：
首先实现了一个api接口“health.ts”，这里很简单，其实就是在封装一些请求的路径：

import { get } from '@/utils/http/request'export function getHealth<T>() {return get<T>('v2/health')
}

然后是调用的代码App.vue：

<script setup lang="ts">
import { useStore } from "./store/index";
import { getHealth } from "~/service/api/health";
const myStore = useStore();// 定义response的数据结构体
interface health {version: string;
}
// 按钮的点击回调函数
function get() {getHealth<health>().then((res) => {// 修改全局变量name，这里内容是上一节继承下来的myStore.$patch({name: res.data.version,});});
}
</script>

然后我们看页面：

然后点击按钮后：

内容就变成response的返回内容了。整个流程就这样实现了。

Vue3+Vite+TypeScript+element Plus框架搭建过程（3）相关推荐

python安装robotframework报错_Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
Python2.7已于2020年1月1日开始停用,之前RF做自动化都是基于Python2的版本. 没办法,跟随时代的脚步,我们也不得不升级以应用新的控件与功能. 升级麻烦,直接全新安装. 一.Pyth ...
使用vue3 +vite + typeScript + elementPlus搭建一个项目脚手架
使用vue3 + vite + elementPlus搭建一个项目脚手架这篇文章就教大家如何使用vue3+vite+ts+element-plus搭建一个项目,步骤详细,献给不爱看文档的诸位,希望这 ...
Python+unittest+requests 接口自动化测试框架搭建完整的框架搭建过程实战
一.Python+unittest+requests+HTMLTestRunner 完整的接口自动化测试框架搭建_00--框架结构简解首先配置好开发环境,下载安装Python并下载安装pycharm ...
搭建一个基于Vue3+Vite+TypeScript的项目
文章目录一.前期准备 1.环境准备 2.开发工具 2.技术选型二.初始化项目三.工具安装 1.编辑器插件 2.开发插件最近准备搭建工作室的官方网站,在这里记录一下项目搭建的过程. 一.前期准备 ...
vue3+vite+typescript实现低代码表单编辑器
开源一款可视化动态表单设计器,后期会把该设计器作为h5低代码平台的组件配置表单废话不多说,直接上干货: 点此立即体验希望各位大佬能给个鼓励,感谢!!! 源码地址预览动图相关技术栈 Vue3 T ...
SSM框架搭建过程----学生学籍管理系统
1.先进行思维导图的设计,设计出整体的框架结构,页面关系 2.依据导图分析数据库中的表格,利用PD设计表格,添加联系,注意主键,外键的设置 3.导出PD的SQL文件,根据文件导入navicat创建对应 ...
Vue3+Vite+TypeScript项目开发
技术栈 vue3.0+ vue-router4.0+ vuex4.0+.vuex-persistedstate vite2.0+ typescript element-plus axios App的r ...
Vue3 + Vite + TypeScript使用Web Worker
Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法.线程可以执行任务而不干扰用户界面.所以,在我们有大量运算任务时,可以把运算任务交给 Worker 线程去处理,当 Wor ...
ssm框架搭建过程中的bug（石乐志）
1.最初的错误:web.xml中未加listener 缺省代码: <listener><listener-class>org.springframework.web.conte ...

Vue3+Vite+TypeScript+element Plus框架搭建过程（3）

使用测试

Vue3+Vite+TypeScript+element Plus框架搭建过程（3）相关推荐

最新文章

热门文章