ts 项目基于axios 请求之后自动转model

星宇大前端

发布于 2020-12-16 07:54:23

2.5K00

代码可运行

文章被收录于专栏：大宇笔记大宇笔记

运行总次数：0

代码可运行

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

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

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

功能

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

安装

  npm install  axios-mapper

  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
}