If it can be achieved, remember to like and share, thank you~
1. First create a services folder
Create a new file named app.ts in it; create a config folder and create an api.ts in it; then create a business folder testModule divided by modules and create an index.ts in it. As shown in the figure:
2. Then configure some regular constants in api.ts
let BASE_URL = "/api";
const TIME_OUT = 20000;
// if (
// location.host.toLowerCase().indexOf("localhost") !== -1 ||
// location.host.toLowerCase().indexOf("127.0.0.1") !== -1
// ) {
// BASE_URL = "/";
// } else {
// BASE_URL = location.origin.toLowerCase() + "/";
// }
const METHOD = {
GET: "GET",
POST: "POST",
PUT: "PUT",
DELETE: "DELETE",
};
export {
BASE_URL, TIME_OUT, METHOD };
3. Write the relevant configuration and interception operations about the request in app.ts
import axios from "axios";
import {
METHOD, BASE_URL, TIME_OUT } from "./config/api";
import {
message } from "ant-design-vue";
const codeMessage: any = {
200: "服务器成功返回请求的数据。",
201: "新建或修改数据成功。",
202: "一个请求已经进入后台排队(异步任务)。",
204: "删除数据成功。",
400: "发出的请求有错误,服务器没有进行新建或修改数据的操作。",
401: "用户没有权限(令牌、用户名、密码错误)。",
403: "用户得到授权,但是访问是被禁止的。",
404: "发出的请求针对的是不存在的记录,服务器没有进行操作。",
406: "请求的格式不可得。",
410: "请求的资源被永久删除,且不会再得到的。",
422: "当创建一个对象时,发生一个验证错误。",
500: "服务器发生错误,请检查服务器。",
502: "网关错误。",
503: "服务不可用,服务器暂时过载或维护。",
504: "网关超时。",
999: "请重新登陆",
};
const instance = axios.create({
baseURL: BASE_URL,
timeout: TIME_OUT,
});
// let loading = null;
// 添加请求拦截器
instance.interceptors.request.use(
function (config) {
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
async function (response: any) {
if (response.status !== 200) {
message.error(codeMessage[response.status]);
return;
}
if (!response?.data.data) {
message.error(response?.data.message || "服务器异常,请稍后再试");
return;
}
return response?.data;
},
function (error) {
// 对响应错误做点什么
message.error(
codeMessage[error?.response?.status] || "服务器异常,请稍后再试"
);
return Promise.reject(error);
}
);
function GET(url: string, params: any, arg: any) {
return instance.get(url, {
params, ...arg });
}
function POST(url: string, params: any) {
return instance.post(url, params);
}
function PUT(url: string, params: any) {
return instance.put(url, params);
}
function DELETE(url: string, params: any) {
return instance.delete(url, params);
}
/**
*
* @param url 请求地址
* @param parmas 请求参数
* @returns
*/
const request = (url: string, parmas: any) => {
switch (parmas.method) {
case METHOD.GET:
return GET(url, parmas.data, parmas);
case METHOD.POST:
return POST(url, parmas.data);
case METHOD.PUT:
return PUT(url, parmas.data);
case METHOD.DELETE:
return DELETE(url, parmas.data);
}
};
export default request;
4. Finally, call according to the module creation request
import request from "../app";
interface props {
keyword: string;
}
export async function getLawList(params: props): Promise<any> {
return request("/xxx/getList", {
method: "POST",
data: params,
});
}
export async function getCaseById(params: detailProps): Promise<any> {
return request("/xxx/getById", {
method: "GET",
data: params,
});
}