Typescript项目，ajax请求封装的最佳实践?

Question

通常项目中会有一个url.ts来统一管理所有的请求地址

1，如何封装xhr请求使用起来会比较方便？

2，或者有什么开源的项目可以参考？

想要达到的效果是： 请求某个URL的时候，在请求中可以约束参数和返回类型

现在的想法是，封装一个ajax请求，然后使用泛型传递类型，大概类似这样

// url ... 
const uerInfo = '/api/users/getUserInfo';
const orderInfo = '/api/order/getOrderInfo';
const productInfo = '/api/product/getProductInfo';
// ... 其它url


// 假设有这么一个封装的请求
function request<T>(config: IConfig): Promise<{code:number,message:string} & T> {
    return new Promise((resolve, reject) => {
        // ajax请求
    });
}

// 假设以下 'I' 开头的类型已经定义

// 请求用户信息
const getUserInfo = (config: IUserInfoCOnfig) => request<IUserInfo>(config);
// 获取订单信息
const getOrderInfo = (config: IOrderInfoConfig) => request<IOrderInfo>(config);
// 获取产品信息
const getProductInfo = (config: IProductInfoConfig) => request<IProductInfo>(config);
// ... 其它请求封装

但是这样的话，如果请求有几百个，为每一个url编写请求会显得很繁琐，而且写了很多重复的代码

Answer 1

interface IConfig { }
interface IInfo {
    id: number | string;
}

interface IUserInfoConfig extends IConfig { }

interface IUserInfo extends IInfo { }

interface IErrorInfo {
    code: number;
    message?: string;
}

function request<T extends IConfig, R extends IInfo>(config: T): Promise<IErrorInfo | R> {
    return new Promise((resolve, reject) => {
        // ajax请求
    });
}

这大概就是你想要的效果吧。

我的课程：TypeScript从入门到实践 【2020 版】 第 6.3 节就在讲泛型，可以来听听啊！

Answer 2

繁琐的问题在于你是手动去写的 而一般来讲这个需要根据API文档自动生成才是合理的
我们就是根据swagger来生成前端所需要的接口请求,入参,返回值包括要用到的枚举都是后端定义,前端只管调用方法