基于 useAxios 的请求函数 ^0.4.0
useAxios 是 vueuse 集成里面的函数，在本项目内做了二次封装了。
这是一个接口请求用的工具函数，使用方式如下：
导入函数
ts
自动导入
如果你使用的是 typescript，你不需要手动导入该内容。本项目已经实现自动导入功能了。
直接使用该函数名即可。
选项配置类型
UseAxiosOptionsJsonVO，是包含我们项目返回值的一个工具类型。我们在定义接口时，可以使用 useAxios 的 options 配置，用该配置实现接口成功和失败的回调定义。
定义 query 传参的接口
如下例子所示：
query 传参的接口
ts
import type { ParamsQueryKey, UseAxiosOptionsJsonVO } from "composables/use-request";
interface ToDelete {
/** 分类的唯一编号 */
id: string;
}
/**
* 删除分类接口
* @see https://app.apifox.com/link/project/5901227/apis/api-264076055
*/
export function queryExample<T = string>(options: UseAxiosOptionsJsonVO<T>) {
return useRequest<ParamsQueryKey, T, ToDelete>({
url: "/sysmanager/catagory/remove-catagory",
options,
httpParamWay: "query",
config: {
method: "delete",
data: {
id: "",
},
},
});
}ParamsQueryKey类型是用来约束该函数传参时需要填写那些字段的。httpParamWay要填写为 query
使用 query 接口
你可以使用 useAxios 函数所提供的全部响应式工具和回调函数。
使用 query 接口的测试用例
ts
import { it } from "vitest";
import { queryExample } from "./query.example.ts";
it("使用 query 接口", async () => {
const { execute, data, isLoading, isFinished } = queryExample({
onSuccess(data) {
console.log("query onSuccess", data);
},
onError(error) {},
onFinish() {},
});
// 主动的做接口请求 从回调函数内获取返回值 或者直接使用解构出来的响应式 data 对象
await execute({
data: {
id: "123",
},
});
console.log("查看简单的 data.value ", data.value);
});定义 body 传参的接口
body 传参的接口
ts
import type { ParamsBodyKey, UseAxiosOptionsJsonVO } from "composables/use-request";
/**
* 分类对象例子
* @description
* 新增 编辑 表格数据
* @see https://app.apifox.com/link/project/5901227/apis/api-264076051
*/
export interface CatagoryExample {
/**
* 图标的唯一编号
*/
iconId?: string;
/**
* 分类的唯一编号
*/
id?: string;
/**
* 分类名称
*/
name?: string;
/**
* 上级id
*/
parentId?: string;
}
/**
* 新增分类接口
* @see https://app.apifox.com/link/project/5901227/apis/api-264076051
*/
export function bodyExample<T = string>(options: UseAxiosOptionsJsonVO<T>) {
return useRequest<ParamsBodyKey, T, CatagoryExample>({
httpParamWay: "body",
options,
url: "/sysmanager/catagory/add-catagory",
config: {
data: {},
method: "POST",
},
});
}ParamsBodyKey类型是用来约束该函数传参时需要填写那些字段的。httpParamWay要填写为 body
使用 body 接口
你可以使用 useAxios 函数所提供的全部响应式工具和回调函数。
使用 body 接口的测试用例
ts
import { it } from "vitest";
import { bodyExample } from "./body.example.ts";
it("使用 body 接口", async () => {
const { execute, data, isLoading, isFinished } = bodyExample({
onSuccess(data) {
console.log("body onSuccess", data);
},
onError(error) {},
onFinish() {},
});
// 主动的做接口请求 从回调函数内获取返回值 或者直接使用解构出来的响应式 data 对象
await execute({
data: {
id: "123",
iconId: "456",
name: "分类名称",
parentId: "上级id",
},
});
console.log("查看简单的 data.value ", data.value);
});定义 path 传参的接口
path 传参的接口
ts
import type { ParamsPathKey, UseAxiosOptionsJsonVO } from "composables/use-request";
/**
* path传参例子
* @see https://app.apifox.com/link/project/5901227/apis/api-266276392
*/
export function pathExample<T = string>(options: UseAxiosOptionsJsonVO<T>) {
return useRequest<ParamsPathKey, T>({
url: "/sysmanager/typegroup/remove/{id}",
options,
httpParamWay: "path",
config: {
url: "/sysmanager/typegroup/remove/{id}",
method: "delete",
},
});
}ParamsPathKey类型是用来约束该函数传参时需要填写那些字段的。httpParamWay要填写为 path
path 传参的 url 可以乱写
这里为了实现类型约束，会强制要求你补全填写 url，但是由于 path 传参的 url 最终是前端自己拼接的，所以此处的 url 事实上是不生效的。你可以乱填写。
但是为了语义化，建议你填写看起来比较正常的地址。
比如本例子就填写了看起来能读懂的地址：
json
{
"url": "/sysmanager/typegroup/remove/{id}"
}使用 path 接口
你可以使用 useAxios 函数所提供的全部响应式工具和回调函数。
使用 path 接口的测试用例
ts
import { it } from "vitest";
import { pathExample } from "./path.example.ts";
/** 要被删除项的id 需要自己准备好 */
const id = "wgwegherth";
it("使用 path 接口", async () => {
const { execute, data, isLoading, isFinished } = pathExample({
onSuccess(data) {
console.log("path onSuccess", data);
},
onError(error) {},
onFinish() {},
});
// 主动的做接口请求 从回调函数内获取返回值 或者直接使用解构出来的响应式 data 对象
await execute({
url: `/sysmanager/typegroup/remove/${id}`,
});
console.log("查看简单的 data.value ", data.value);
});path 传参方式
path 传参方式要求前端在接口请求路径上传递参数，请注意填写值的格式。需要前端自己拼接接口参数。
先拼接，再做接口请求。
贡献者
ruan-cat