TypeScript在Vue项目中：泛型+interface

一、这是一般在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

显然是可以直接返回的（是AxiosResponse<T>），不需要那么复杂，所以可以我们以后选择post或get简单一点。