From 61675f74ba4964ad6d186cefb1ff913fe74b3425 Mon Sep 17 00:00:00 2001 From: pany <939630029@qq.com> Date: Thu, 2 Feb 2023 11:31:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20Axios=20=E5=93=8D=E5=BA=94=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E6=94=AF=E6=8C=81=E9=80=9A=E8=BF=87=E6=B3=9B=E5=9E=8B?= =?UTF-8?q?=E6=8E=A8=E5=AF=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/hook-demo/use-fetch-select.ts | 6 ++--- src/api/hook-demo/use-fullscreen-loading.ts | 6 ++--- src/api/login.ts | 15 ++++++++---- src/api/table.ts | 27 +++++++++++++++------ src/store/modules/user.ts | 8 +++--- src/utils/service.ts | 2 +- src/views/login/index.vue | 6 ++--- src/views/table/element-plus/index.vue | 2 +- types/api.d.ts | 6 +++++ 9 files changed, 51 insertions(+), 27 deletions(-) create mode 100644 types/api.d.ts diff --git a/src/api/hook-demo/use-fetch-select.ts b/src/api/hook-demo/use-fetch-select.ts index 5998e40..8815a60 100644 --- a/src/api/hook-demo/use-fetch-select.ts +++ b/src/api/hook-demo/use-fetch-select.ts @@ -1,5 +1,5 @@ /** 模拟接口响应数据 */ -const SELECT_DATA = { +const SELECT_RESPONSE_DATA = { code: 0, data: [ { @@ -21,12 +21,12 @@ const SELECT_DATA = { /** 模拟接口 */ export function getSelectDataApi() { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { // 模拟接口响应时间 2s setTimeout(() => { // 模拟接口调用成功 if (Math.random() < 0.8) { - resolve(SELECT_DATA) + resolve(SELECT_RESPONSE_DATA) } else { // 模拟接口调用出错 reject(new Error("接口发生错误")) diff --git a/src/api/hook-demo/use-fullscreen-loading.ts b/src/api/hook-demo/use-fullscreen-loading.ts index 6f86104..c8cf7ec 100644 --- a/src/api/hook-demo/use-fullscreen-loading.ts +++ b/src/api/hook-demo/use-fullscreen-loading.ts @@ -1,5 +1,5 @@ /** 模拟接口响应数据 */ -const SUCCESS_DATA = { +const SUCCESS_RESPONSE_DATA = { code: 0, data: {}, message: "获取成功" @@ -7,9 +7,9 @@ const SUCCESS_DATA = { /** 模拟请求接口成功 */ export function getSuccessApi() { - return new Promise((resolve) => { + return new Promise((resolve) => { setTimeout(() => { - resolve(SUCCESS_DATA) + resolve(SUCCESS_RESPONSE_DATA) }, 1000) }) } diff --git a/src/api/login.ts b/src/api/login.ts index f566a06..8c9cae4 100644 --- a/src/api/login.ts +++ b/src/api/login.ts @@ -1,6 +1,6 @@ import { request } from "@/utils/service" -export interface ILoginData { +export interface ILoginRequestData { /** admin 或 editor */ username: "admin" | "editor" /** 密码 */ @@ -9,16 +9,21 @@ export interface ILoginData { code: string } +type LoginCodeResponseData = IApiResponseData +type LoginResponseData = IApiResponseData<{ token: string }> +type UserInfoResponseData = IApiResponseData<{ username: string; roles: string[] }> + /** 获取登录验证码 */ export function getLoginCodeApi() { - return request({ + return request({ url: "login/code", method: "get" }) } + /** 登录并返回 Token */ -export function loginApi(data: ILoginData) { - return request({ +export function loginApi(data: ILoginRequestData) { + return request({ url: "users/login", method: "post", data @@ -26,7 +31,7 @@ export function loginApi(data: ILoginData) { } /** 获取用户详情 */ export function getUserInfoApi() { - return request({ + return request({ url: "users/info", method: "get" }) diff --git a/src/api/table.ts b/src/api/table.ts index 6c73312..92a05ee 100644 --- a/src/api/table.ts +++ b/src/api/table.ts @@ -1,17 +1,17 @@ import { request } from "@/utils/service" -interface ICreateTableDataApi { +interface ICreateTableRequestData { username: string password: string } -interface IUpdateTableDataApi { +interface IUpdateTableRequestData { id: string username: string password?: string } -interface IGetTableDataApi { +interface IGetTableRequestData { /** 当前页码 */ currentPage: number /** 查询条数 */ @@ -21,8 +21,21 @@ interface IGetTableDataApi { phone?: string } +type GetTableResponseData = IApiResponseData<{ + list: { + createTime: string + email: string + id: string + phone: string + roles: string + status: boolean + username: string + }[] + total: number +}> + /** 增 */ -export function createTableDataApi(data: ICreateTableDataApi) { +export function createTableDataApi(data: ICreateTableRequestData) { return request({ url: "table", method: "post", @@ -39,7 +52,7 @@ export function deleteTableDataApi(id: string) { } /** 改 */ -export function updateTableDataApi(data: IUpdateTableDataApi) { +export function updateTableDataApi(data: IUpdateTableRequestData) { return request({ url: "table", method: "put", @@ -48,8 +61,8 @@ export function updateTableDataApi(data: IUpdateTableDataApi) { } /** 查 */ -export function getTableDataApi(params: IGetTableDataApi) { - return request({ +export function getTableDataApi(params: IGetTableRequestData) { + return request({ url: "table", method: "get", params diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index ea33a4e..2bf7cf0 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -4,7 +4,7 @@ import { defineStore } from "pinia" import { usePermissionStore } from "./permission" import { getToken, removeToken, setToken } from "@/utils/cache/cookies" import router, { resetRouter } from "@/router" -import { type ILoginData, loginApi, getUserInfoApi } from "@/api/login" +import { type ILoginRequestData, loginApi, getUserInfoApi } from "@/api/login" import { type RouteRecordRaw } from "vue-router" export const useUserStore = defineStore("user", () => { @@ -17,14 +17,14 @@ export const useUserStore = defineStore("user", () => { roles.value = value } /** 登录 */ - const login = (loginData: ILoginData) => { + const login = (loginData: ILoginRequestData) => { return new Promise((resolve, reject) => { loginApi({ username: loginData.username, password: loginData.password, code: loginData.code }) - .then((res: any) => { + .then((res) => { setToken(res.data.token) token.value = res.data.token resolve(true) @@ -38,7 +38,7 @@ export const useUserStore = defineStore("user", () => { const getInfo = () => { return new Promise((resolve, reject) => { getUserInfoApi() - .then((res: any) => { + .then((res) => { roles.value = res.data.roles username.value = res.data.username resolve(res) diff --git a/src/utils/service.ts b/src/utils/service.ts index 095905c..bd76b24 100644 --- a/src/utils/service.ts +++ b/src/utils/service.ts @@ -88,7 +88,7 @@ function createService() { /** 创建请求方法 */ function createRequestFunction(service: AxiosInstance) { - return function (config: AxiosRequestConfig) { + return function (config: AxiosRequestConfig): Promise { const configDefault = { headers: { // 携带 Token diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 6d07d3a..7c8c344 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -5,7 +5,7 @@ import { useUserStore } from "@/store/modules/user" import { User, Lock, Key, Picture, Loading } from "@element-plus/icons-vue" import ThemeSwitch from "@/components/ThemeSwitch/index.vue" import { type FormInstance, FormRules } from "element-plus" -import { type ILoginData, getLoginCodeApi } from "@/api/login" +import { type ILoginRequestData, getLoginCodeApi } from "@/api/login" const router = useRouter() const loginFormRef = ref(null) @@ -15,7 +15,7 @@ const loading = ref(false) /** 验证码图片 URL */ const codeUrl = ref("") /** 登录表单数据 */ -const loginForm: ILoginData = reactive({ +const loginForm: ILoginRequestData = reactive({ username: "admin", password: "12345678", code: "" @@ -61,7 +61,7 @@ const createCode = () => { loginForm.code = "" // 获取验证码 codeUrl.value = "" - getLoginCodeApi().then((res: any) => { + getLoginCodeApi().then((res) => { codeUrl.value = res.data }) } diff --git a/src/views/table/element-plus/index.vue b/src/views/table/element-plus/index.vue index c6e192d..e650d43 100644 --- a/src/views/table/element-plus/index.vue +++ b/src/views/table/element-plus/index.vue @@ -93,7 +93,7 @@ const getTableData = () => { username: searchData.username || undefined, phone: searchData.phone || undefined }) - .then((res: any) => { + .then((res) => { paginationData.total = res.data.total tableData.value = res.data.list }) diff --git a/types/api.d.ts b/types/api.d.ts new file mode 100644 index 0000000..9554633 --- /dev/null +++ b/types/api.d.ts @@ -0,0 +1,6 @@ +/** 所有 api 接口的响应数据都应该准守该格式 */ +interface IApiResponseData { + code: number + data: T + message: string +}