Skip to content

Latest commit

 

History

History
147 lines (113 loc) · 3.52 KB

README-ZH.md

File metadata and controls

147 lines (113 loc) · 3.52 KB
Raw

Language: English | 中文简体

axios mapper

npm npm npm npm License

在移动端和后台进行数据操作的时候，我们往往会将网络请求抽象一个model层，便于维护和开发使用。

前端用TS做项目，抽象model层是非常有必要。

axios-mapper是用来解决这个问题，让请求直接返回model。而且优化请求，防止过快点击重复请求。

注意点：axios-mapper 的初衷是为了解决模型转换的问题，是axios 上层的简单封装，如果上传文件或者一些特殊处理可以直接使用axios

功能

  • 更简单的axios请求返回自动转成model
  • 自定义间隔时间，防止重复快速点击

安装

  npm install  axios-mapper

or

  yarn add axios-mapper

简单使用

1、基础配置

 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 web：http://json2ts.com

// {
//     "slideshow": {
//       "author": "Yours Truly",
//       "date": "date of publication",
//       "slides": [
//         {
//           "title": "Wake up to WonderWidgets!",
//           "type": "all"
//         },
//         {
//           "items": [
//             "Why <em>WonderWidgets</em> are great",
//             "Who <em>buys</em> 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、请求时获得转换

import  https  from "./http";
import { RootObject } from "./model";

https.request<RootObject>('/json').then((res)=>{
    console.log(res?.slideshow);
})

全部配置

配置基于AxiosRequestConfig类，扩展新增默认参数和间隔时间

export interface HttpClientConfig extends AxiosRequestConfig {
 //所有请求可以带默认参数
  defaultParams?: RequestParams,
  //click interval (点击间隔时间)
  clickInterval?:number
}

依赖

  • axios
  • qs

脚本

use tsdx to publish

License

axios-mapper: Axios is open-sourced software licensed under the MIT license.