前言
从vue3出来后，使用率越来越高，同时由于vue3由ts编写，对ts支持非常好
越来越多人全面拥抱 vue3+ts 的组合
那么既然用到了ts，肯定就要用好，而不是把它当成 anyScript 来使用，那样就失去了ts的使用意义了
写ts的时候，由于各种类型限制，写起来是比较繁琐的
尤其是当我们在使用 axios 的时候，我们前端本地自己写的可以限制类型
那使用接口后返回的数据该怎么定义约束这些类型呢，让我们的项目更加规范
正文
实际上在axios中也是支持ts的，让我们把它提供的类型进行结合起来
这里我把我的实现思路代码以及注释贴出，以供参考
我们需要思考并实现这几个点
- 1、如何在请求拦截器的 请求头 上加上我们的 token类型，避免ts类型报错
- 2、怎么在接口返回数据时约束类型
- 3、怎么在调用接口时约束入参类型
首先我们按照正常项目思路，创建好我们的axios实例封装文件，在这里定义好相关的类型约束
创建一个 request.ts 文件并创建实例
import axios from 'axios'
/* 创建请求实例 */
const service = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 30000
})
然后我们需要改装一下axios自带的类型，并重新自定义为我们需要的类型
这里发现自定义的 RequestConfig 参数类型由于是在调用接口实例时使用的，所以headers非必传项
但是在拦截器器中返回的类型出了问题，请求拦截器中的参数必有 headers 字段，所以这里只能分开写成两个
// 引入 axios自带的 请求接口request参数类型 以及 请求接口headers头参数类型
import type { AxiosRequestConfig, AxiosRequestHeaders } from 'axios'
// 1、自定义请求接口headers头参数类型
type RequestHeader = AxiosRequestHeaders & { token?: string }
// 2、自定义请求接口request参数类型，可以加一些自己自定义的参数
interface RequestConfig extends AxiosRequestConfig {
headers?: RequestHeader // 放入请求头
noNeedToken?: boolean // 该接口是否需要token
}
interface RequestInterceptorsConfig extends RequestConfig { // 请求拦截器使用
headers: RequestHeader;
}
然后在请求拦截器里就可以把相关的自定义参数写上去了
/* 添加请求拦截器 */
service.interceptors.request.use(
(config: RequestInterceptorsConfig) => { // 请求拦截
if (config.noNeedToken) { // 自定义的参数，是否不需要token的接口
return config
}
const token = 'aaaaa' // 这里获取token
if (!token) {
return Promise.reject();
}
if (token) {
config.headers.token = token // 请求头中添加token
}
return config
},
(error: AxiosError) => { // 请求错误拦截
return Promise.reject(error);
}
);
ts的提示出现了，类型检查生效
接下来封装 request请求方法 ，约束接口返回数据类型，使用前面定义好的请求接口RequestConfig 类型
/* 封装实例的请求方法 */
// 传入泛型约束返回数据类型
// ApiResponse 主体后端返回格式
interface ApiResponse<T = any> {
code: number;
msg: string;
data: T; // 这里定义请求返回data数据类型
}
export default async function request<T>(config: RequestConfig) {
// axios实例的 request 接受的第一个泛型参数，就是返回数据data的类型
return service.request<ApiResponse<T>>(config).then((res) => res.data); // 返回axios的里data数据
}
这里的 ApiResponse 类型是在一般情况下，我们请求后回来的data数据还会再包裹一层后端定义的状态码、消息、数据，这才是我们需要的，所以也要加上类型
总算配置好了
接下来在scr下新建api文件夹，创建接口文件，引入这个axios实例并使用，直接在request方法传入后端返回的数据格式即可
import request from "../utils/request";
interface testModel {
name: string
age: number
}
export function test() {
return request<testModel>({
method: 'get',
url: '/test',
})
}
ts的提示出现了，类型检查生效
以后只需要根据后端接口文档定义好相应的返回数据类型，然后泛型传入quest方法即可
那么怎么约束入参类型呢，只需要在方法入口处限制即可
参数不对就会提示
配置完成！
下面贴上完整代码
代码
文件根目录/types/axios.d.ts
import type {
AxiosRequestConfig,
AxiosRequestHeaders,
AxiosError,
} from "axios";
// 自定义请求接口headers头参数类型
type RequestHeader = AxiosRequestHeaders & { token?: string }
// 自定义请求接口request参数类型，可以加一些自己自定义的参数
export interface RequestConfig extends AxiosRequestConfig {
headers?: RequestHeader // 放入请求头
noNeedToken?: boolean // 该接口是否需要token
}
export interface RequestInterceptorsConfig extends RequestConfig { // 请求拦截器使用
headers: RequestHeader;
}
// 主体后端返回格式
export interface ApiResponse<T = any> {
code: number;
msg: string;
data: T; // 这里定义请求返回data数据类型
}
文件根目录/src/utils/request.ts
import axios from "axios";
import type {
AxiosError,
} from "axios";
import type { RequestConfig, RequestInterceptorsConfig, ApiResponse } from '../../types/axios'
/* 创建请求实例 */
const service = axios.create({
baseURL: "xxxxxxxx",
timeout: 30000,
});
/* 添加请求拦截器 */
service.interceptors.request.use(
(config: RequestInterceptorsConfig) => { // 请求拦截
if (config.noNeedToken) { // 自定义的参数，是否不需要token的接口
return config
}
const token = 'aaaaa' // 这里获取token
if (!token) {
return Promise.reject();
}
if (token) {
config.headers.token = token
}
return config
},
(error: AxiosError) => { // 请求错误拦截
return Promise.reject(error);
}
);
/* 添加响应拦截器 */
service.interceptors.response.use();
/* 封装实例的请求方法 */
export default async function request<T>(config: RequestConfig) {
// axios实例的 request 接受的第一个泛型参数，就是返回数据data的类型
return service.request<ApiResponse<T>>(config).then((res) => res.data); // 返回axios的里data数据
}
文件根目录/src/api/user.ts
import request from "../utils/request";
interface testModel {
name: string
age: number
}
interface dataModel { // 接口入参类型
page: number
size: number
}
export function test(data: dataModel) {
return request<testModel>({
method: 'get',
url: '/test',
data
})
}
test({page: 1, size: 10}).then(res => {
console.log(res)
})
