https://github.com/rainmango/axios-mapper
🚀🚀make ts project easy to requset transform model
https://github.com/rainmango/axios-mapper
axios axios-mapper axios-model axios-plugin ts ts-transform-model
Last synced: 2 months ago
JSON representation
🚀🚀make ts project easy to requset transform model
- Host: GitHub
- URL: https://github.com/rainmango/axios-mapper
- Owner: RainManGO
- License: mit
- Created: 2020-12-12T08:36:28.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-10-25T00:54:13.000Z (over 2 years ago)
- Last Synced: 2025-02-27T21:49:40.817Z (3 months ago)
- Topics: axios, axios-mapper, axios-model, axios-plugin, ts, ts-transform-model
- Language: TypeScript
- Homepage:
- Size: 301 KB
- Stars: 41
- Watchers: 4
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README-ZH.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Language: [English](README.md) | [中文简体](README-ZH.md)
>在移动端和后台进行数据操作的时候，我们往往会将网络请求抽象一个model层，便于维护和开发使用。
前端用TS做项目，抽象model层是非常有必要。
[axios-mapper](https://github.com/RainManGO/axios-mapper)是用来解决这个问题，让请求直接返回model。而且优化请求，防止过快点击重复请求。
注意点：axios-mapper 的初衷是为了解决模型转换的问题，是axios 上层的简单封装，如果上传文件或者一些特殊处理可以直接使用axios
## 功能
- [x] 更简单的axios请求返回自动转成model
- [x] 自定义间隔时间，防止重复快速点击
## 安装
```shell
npm install axios-mapper
```
or
```shell
yarn add axios-mapper
```
## 简单使用
1、基础配置
```js
import HttpClient,{HttpClientConfig} from "../src/index";
const config:HttpClientConfig = {
baseURL:'http://www.httpbin.org',
headers:{
token:'your token'
}
}
const https = new HttpClient(config)
export default https
```
2 、自动化产生model
vscode extension : [json2ts](https://marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts)
web：[http://json2ts.com](http://json2ts.com)
```javascript
// {
// "slideshow": {
// "author": "Yours Truly",
// "date": "date of publication",
// "slides": [
// {
// "title": "Wake up to WonderWidgets!",
// "type": "all"
// },
// {
// "items": [
// "Why WonderWidgets are great",
// "Who buys WonderWidgets"
// ],
// "title": "Overview",
// "type": "all"
// }
// ],
// "title": "Sample Slide Show"
// }
// }
export interface Slide {
title: string;
type: string;
}
export interface Slideshow {
author: string;
date: string;
slides: Slide[];
title: string;
}
export interface RootObject {
slideshow: Slideshow;
}
```
3、请求时获得转换
```javascript
import https from "./http";
import { RootObject } from "./model";
https.request('/json').then((res)=>{
console.log(res?.slideshow);
})
```
## 全部配置
配置基于AxiosRequestConfig类，扩展新增默认参数和间隔时间
```javascript
export interface HttpClientConfig extends AxiosRequestConfig {
//所有请求可以带默认参数
defaultParams?: RequestParams,
//click interval (点击间隔时间)
clickInterval?:number
}
```
## 依赖
- axios
- qs
## 脚本
use [tsdx](https://github.com/formium/tsdx) to publish
## License
axios-mapper: Axios is open-sourced software licensed under the [MIT license](./LICENSE).