axios的泛型约束?

Question

/**
 * 
 * 我的理解Promise<T>
 * 定义一个T类型表示接口的返回为 T类型
 * 
 * 问题:::如果接口返回的不是T类型怎么办 ?
 * 我声明的接口返回的数据格式是  cbType
 * 
 * 如果接口返回的data为 null, 或者里面的name为null 怎么办
 * ts类型约束是不是就没用了
 * 
 */
type cbType = {
    data: {
        name: string
        age: number
    }
}
function request<T>(): Promise<T> {
    return service({
        url: '/api/growth/external/sandbox/request',//连接
        method: 'POST',//请求方法
        data: {}
      })
}

request<cbType>()

Answer 1

主要是rest API 返回的结果一定要设计好，我前后都自己写，所以没有配合上的问题，我是这么
所有API返回都是如以下格式

｛
  "success":true， //代表API访问是否成功
  "message":"",//表来返回一些如果出错的错误信息
  "data":{} // 无论返回的任何类型的数据信息都装在这里
｝

在客户端定义一个类型

interface JsonReturn<T> {
        success: boolean;
        message: string;
        data?: T;
｝

假如API返回的时商品信息

//定义商品的数据类型
interface IProductItem {
        id: string;
        itemid: string;
        itemname: string;
        itempic: string;
        itemcats: string;
}


//根据ID获取单个商品
export const getItemById = async (id:string) => {
    return fetch.get<any,wx.JsonReturn<wx.IProductItem>>('/v2/item/iteminfo', {
        params:{
            itemid:id
        }
    })
}
//获取商品列表
export const getProductList = async (obj:any) =>{
    return fetch.get<any,wx.JsonReturn<wx.IProductItem[]>>('/v2/Item/itemlist',{
        params: {
            param: JSON.stringify(obj)
        }
    })
}

如果要返回别的数据类型，只需要定义对应的

interface IArticle {
        id: string;
        title: string;
        titleImg: string;
        created: string;
        modified: string;
        content: string;
}

//根据ID获取文章
export const getArticleById = async (obj:any) =>{
    return fetch.get<any,wx.JsonReturn<wx.IArticle>>('/v2/artitcle/artitcleinfo',{
        params: {
            param: JSON.stringify(obj)
        }
    })
}

至于你说的类型约束，前后端开发的时候，约定比在代码中约束更重要，对于一些意外情况，做好错误处理就可以了。

就如我上面的例子，在getItemById请求商品数据的时候，如果data为NULL,完全可以把success置为false,这样在用到data之前处理了，但如果API给我返回了一个文章的信息，你让前端怎么办， 这是后端毛病啊， 所以接口返回的数据一定要约定规范好。

Answer 2

使用联合类型扩大范围

type cbType = {
    data: {
        name: string | null
        age: number
    } | null
}
function request<T>(): Promise<T> {
    return service({
        url: '/api/growth/external/sandbox/request',//连接
        method: 'POST',//请求方法
        data: {}
      })
}