使用 useRequestIn01s 函数
useAxios 是 vueuse 集成里面的函数，在本项目内做了二次封装了。
这是一个接口请求用的工具函数，使用方式如下：
已有先例
本页文档是从一个具体的项目内摘抄过来的，点此阅读具体项目内的用法。
预备axios实例
根据具体业务，创建请求实例，并自行配置相关的请求拦截器。
createAxiosInstance
ts
import axios from "axios";
import qs from "qs";
/**
* 创建axios实例
* @description
* @see https://01s-10wms-clone.apifox.cn/
*/
export function createAxiosInstance() {
const baseURL = "https://m1.apifoxmock.com/m1/6142648-5834505-default";
const instance = axios.create({
baseURL,
/** 请求超时时间 */
timeout: 10000,
/** 允许跨域 */
withCredentials: true,
/**
* 在 vitest 内做接口请求时，会使用node环境内的环境变量
* 比如 HTTPS_PROXY 变量。这里设置为false，不使用代理。
*/
proxy: false,
});
// 使用qs序列化参数params参数
instance.defaults.paramsSerializer = function (params) {
return qs.stringify(params);
};
return instance;
}
/**
* 接口请求时用的请求实例
* @description
* 目前作为专用于 useAxios 的接口请求实例
*/
export const axiosInstance = createAxiosInstance();预设请求实例
使用 defineAxiosInstance 函数完成请求实例预设。这里推荐同时导出要用的类型。
详情
ts
// @ts-ignore
import { defineAxiosInstance } from "@ruan-cat/utils/vueuse/useAxios-for-01s/index.ts";
// @ts-ignore
import { axiosInstance } from "./createAxiosInstance.ts";
defineAxiosInstance(axiosInstance);
export {
type ParamsPathKey,
type ParamsQueryKey,
type ParamsBodyKey,
type HttpParamWay,
type AxiosRequestConfigBaseKey,
type UseAxiosOptionsJsonVO,
type UseAxiosOptionsImmediate,
type HttpStatus,
type HttpCodeMessageMapValue,
type JsonVO,
type PageDTO,
UpType,
HttpCode,
MapContentTypeUpType,
isHttpStatusSuccess,
HttpCodeMessageMap,
setHeaders,
createDefaultUseAxiosOptions,
setDefaultUseAxiosOptions,
setDataByHttpParamWay,
useRequestIn01s as useRequest,
// @ts-ignore
} from "@ruan-cat/utils/vueuse/useAxios-for-01s/index.ts";导入函数
详情
ts
// @ts-ignore 可以直接从模块内导入
import { useRequestIn01s } from "@ruan-cat/utils/vueuse/useAxios-for-01s/index.ts";
// @ts-ignore 也可以使用自己二次导出的函数
import { useRequest } from "./request.ts";选项配置类型
UseAxiosOptionsJsonVO，是包含我们项目返回值的一个工具类型。我们在定义接口时，可以使用 useAxios 的 options 配置，用该配置实现接口成功和失败的回调定义。
定义 query 传参的接口
如下例子所示：
query 传参的接口
ts
// @ts-ignore
import type { ParamsQueryKey, UseAxiosOptionsJsonVO } from "./request.ts";
// @ts-ignore
import { useRequest } from "./request.ts";
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 { printFormat } from "../../../../print";
// @ts-ignore
import { queryExample } from "./query.example.ts";
it("使用 query 接口", async () => {
const { execute, data } = queryExample({
onSuccess(data) {
console.warn("query onSuccess", printFormat(data));
},
onError(error) {},
});
// 主动的做接口请求 从回调函数内获取返回值 或者直接使用解构出来的响应式 data 对象
await execute({
data: {
id: "123",
},
});
console.warn("查看简单的 data.value ", printFormat(data.value));
});定义 body 传参的接口
body 传参的接口
ts
// @ts-ignore
import type { ParamsBodyKey, UseAxiosOptionsJsonVO } from "./request.ts";
// @ts-ignore
import { useRequest } from "./request.ts";
/**
* 分类对象例子
* @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 { printFormat } from "../../../../print";
// @ts-ignore
import { bodyExample } from "./body.example.ts";
it("使用 body 接口", async () => {
const { execute, data } = bodyExample({
onSuccess(data) {
console.warn("body onSuccess", printFormat(data));
},
onError(error) {},
});
// 主动的做接口请求 从回调函数内获取返回值 或者直接使用解构出来的响应式 data 对象
await execute({
data: {
id: "123",
iconId: "456",
name: "分类名称",
parentId: "上级id",
},
});
console.warn("查看简单的 data.value ", printFormat(data.value));
});定义 path 传参的接口
path 传参的接口
ts
// @ts-ignore
import type { ParamsPathKey, UseAxiosOptionsJsonVO } from "./request.ts";
// @ts-ignore
import { useRequest } from "./request.ts";
/**
* 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 { printFormat } from "../../../../print";
// @ts-ignore
import { pathExample } from "./path.example.ts";
/** 要被删除项的id 需要自己准备好 */
const id = "wgwegherth";
it("使用 path 接口", async () => {
const { execute, data } = pathExample({
onSuccess(data) {
console.warn("path onSuccess", printFormat(data));
},
onError(error) {},
});
// 主动的做接口请求 从回调函数内获取返回值 或者直接使用解构出来的响应式 data 对象
await execute({
url: `/sysmanager/typegroup/remove/${id}`,
});
console.warn("查看简单的 data.value ", printFormat(data.value));
});path 传参方式
path 传参方式要求前端在接口请求路径上传递参数，请注意填写值的格式。需要前端自己拼接接口参数。
先拼接，再做接口请求。
贡献者
ruan-cat