一、这是一般在vue项目做的axios二次封装、api解耦
- 1.1 request.ts
import axios from 'axios';
//1. 创建axios对象
const service = axios.create({
baseURL:'http://testapi.xuexiluxian.cn'
});
//2. 请求拦截器
service.interceptors.request.use(config => {
return config;
}, error => {
Promise.reject(error);
});
//3. 响应拦截器
service.interceptors.response.use(response => {
//判断code码
return response.data;
},error => {
return Promise.reject(error);
});
export default service;
- 1.2 course.ts
interface ImostNew{
pageNum:number;
pageSize:number;
}
//查询最新课程
export function mostNew( data:ImostNew ){
return request({
url:'/api/course/mostNew',
method:'post',
data
})
}
- 1.3 HelloWorld.vue发送请求
async created(){
let res = await mostNew({
pageNum:1,
pageSize:8
})
console.log( res )
}
以上内容中，大家可以看到在course.ts中使用了interface对于参数的类型约束，但是没有对于后端给前端返回的数据的类型进行约束。
下一步我们来看看如何约束吧
二、约束后端给前端返回的数据的类型
export function mostNew( data:ImostNew ): Promise<IRes<Idata>>{
return request({
url:'/api/course/mostNew',
method:'post',
data
})
}
按照想法：mostNew的返回值是一个Promise，但是如果请求成功了，会执行：service.interceptors.response.use然后我们会return response.data; 那么直接Promise<xx>行吗？其实看看axios源码是不行的
8edb3108c7754d7ebe9e43aedb541116.png
0252aa4b32214f04b3b1fed4abf5f7be.png
所以我们必须这样写，才可以约束
interface ImostNew{
pageNum:number;
pageSize:number;
}
interface IRese<T>{
data: T;
status: number;
statusText: string;
headers: {};
config: {};
request?: any;
}
interface Idata{
data:{},
meta:{
code:string;
msg: string;
success: boolean;
timestamp: string;
version:string;
}
}
export function mostNew( data:ImostNew ): Promise<IRes<Idata>>{
return request({
url:'/api/course/mostNew',
method:'post',
data
})
}
-
确实是没有问题了，但是会发现返回值的类型推断是有问题的
7f214e9b215d42608805e928eea1f8b2.png
d8bf606b4ff54c16a84e3aeb5fa400b0.png
