手把手教你实现一个vue3+ts+nodeJS后台管理系统（十七）

前言

接口文档有了，代理跨域、封装axios请求库的工作也做完了，接下来我们就可以对接口文档所提供的接口进行接口方法的封装，以便于调用接口。但首先我们得对请求参数的ts类型进行封装。

封装接口参数的ts类型

我们先根据接口文档提供的参数类型来封装ts类型。

在src文件夹下创建types文件夹，我们所有模块的ts类型声明都封装在这里，以.d.ts文件形式存储。但还得配置tsconfig.json的include属性添加types文件夹里的.d.ts文件，这样里面的ts类型声明才能被全局检测到。

tsconfig.json

{
  "compilerOptions":{...},
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
}

然后创建对应模块的.d.ts文件

以user.d.ts为例，我们进行封装。做法就是根据接口文档对应接口入参的类型进行一一对应就行

/**
 * 用户查询表单类型
 */
declare interface userQueryParams {
  currentPage: number; // 当前页
  pageSize: number; // 每页条数
  username?: string | undefined;
  status?: number | undefined;
}
/**
 * 用户编辑表单类型
 */
declare interface userEditForm {
  user_id: number;
  action: string;
  username: string;
  old_password: string;
  password: string;
  repassword: string;
  status: number;
  role_ids: any[];
}

其它模块的也与此类似

封装接口方法

在axios封装的配置文件中，我们可以得到一个axios对象的实例。导入此实例，再根据此实例添加接口请求url、method、data（params）就可以封装接口方法。之前初始化项目的时候我们已经在utils下创建了一个api文件夹，我们就在这里进行封装。

1. 因为我们现在得接口都以user为前缀，所以我们在api文件夹下再创建一个user文件夹，然后根据模块再创建对应的ts文件

1. 接下来以user模块为例。我们先导入axios实例，根据此实例进行axios请求的封装

   // 导入axios实例
   import $http from '../../http';
   // 导入获取refreshToken的方法
   import { getRefreshToken } from '@/utils/auth';
   // 获取图形验证码
   export const getCheckCode = (uuid: number) => {
     return $http({
       url: '/user/checkCode?uuid=' + uuid,
       method: 'get'
     });
   };
   // 刷新过期token
   export const refreshToken = () => {
     return $http({
       url: '/user/refreshToken',
       method: 'post',
       data: { refreshToken: getRefreshToken() }
     });
   };
   // 添加用户登录请求 data如果约定好可以添加ts 接口类型
   export const userLogin = (form: loginForm) => {
     return $http({
       url: '/user/login',
       method: 'post',
       data: form
     });
   };
   ​
   export const listUser = (params: userQueryParams) => {
     return $http({
       url: '/user/list',
       method: 'get',
       params: params
     });
   };
   ​
   export const addUser = (form: userEditForm) => {
     return $http({
       url: '/user/addUser',
       method: 'post',
       data: form
     });
   };
   ​
   export const updateUser = (form: userEditForm) => {
     return $http({
       url: '/user/editUser/' + form.user_id,
       method: 'post',
       data: form
     });
   };
   ​
   export const delUser = (ids: object) => {
     return $http({
       url: '/user/delUser',
       method: 'post',
       data: ids
     });
   };
   ​
   export const updatePwd = (form: submitPass) => {
     return $http({
       url: `/user/editPwd`,
       method: 'post',
       data: form
     });
   };
   // 根据id获取用户数据
   export const getUserInfoById = (user_id: number) => {
     return $http({
       url: `/user/queryUserInfo/${user_id}`,
       method: 'get'
     });
   };
   

   其余模块也与此类似