硅谷甄选-api接口统一管理

开发项目的时候，都要通过api来统一管理接口；

我们将接口都放在api中统一管理；新建api文件夹；

我们用文件夹来分类管理api

user就是用户相关的；登录、获取用户信息、退出登录等；

product就是商品相关的；

acl就是权限管理相关的；

我们现在mock了两个接口：

• 登录接口
• 获取用户信息

我们将这两个接口，使用api统一管理一下；

我们在index.ts文件中统一管理，用户相关的接口；

接口发送请求的时候要带参数，比如形参；服务器返回的数据；

都需要定义ts类型；

我们使用type.ts定义数据的类型；

index.ts

定义接口方法；

定义服务器返回的数据的类型；

总结

• api的统一的接口管理，这是啥意思；
• 就是说，对于前端需要请求后端的api，都要有一个地方需要管理的；
• 我不是已经有了axios封装后的request了嘛？
  • 对呀，这个只是一个发起请求的小组件，封装的是什么玩意？是请求拦截器和响应拦截器。
• 你真正的业务接口，你有封装吗？
• 你没有的；
• 所以，我们是需要用一个api文件夹来管理，我们所有的涉及向后端发送的业务接口的。
• 今天我们封装的是什么？
• 我们封装的是，用户登录相关的接口；

import request from '../../utils/request'
import type { loginForm, loginResponseData, userResponseData } from './type.ts'

// 统一管理接口
enum API {
  LOGIN_URL = '/user/login',
  USERINFO_URL = '/user/info'
}

// 暴露请求函数
// 登录的接口方法
export const reqLogin = (data: loginForm) => request.post<any, loginResponseData>(API.LOGIN_URL, data)
// 获取用户信息的接口方法
export const reqUserInfo = () => request.get<userResponseData>(API.USERINFO_URL)

这是index.ts中的方法，这是定义接口；

// 登录接口：请求需要携带的参数的ts类型
export interface loginForm {
  username: string,
  password: string
}

// 提供下方使用；
interface dataType {
  token: string
}

// 登录接口：服务器返回的数据类型；
export interface loginResponseData {
  code: number,
  data: dataType
}

// ****************************************
// 定义服务器返回用户信息相关的数据类型
interface userInfo {
  userId: number,
  avatar: string,
  username: string,
  password: string,
  desc: string,
  roles: string[],
  buttons: string[],
  routes: string[],
  token: string
}

interface user {
  checkUser: userInfo
}

export interface userResponseData {
  code: number,
  data: user
}

上面是type.ts中的方法。这是定义类型；

dua lipa - 祈祷肚子

杜阿·利帕 (Dua Lipa)

dua是祈祷的意思；lipa是肚子的意思；