Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

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

通常项目中会有一个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编写请求会显得很繁琐,而且写了很多重复的代码


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
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 节就在讲泛型,可以来听听啊!

image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...