chili-request
TypeScript icon, indicating that this package has built-in type declarations

1.2.6 • Public • Published

Welcome to chili-request 👋

Version License: MIT

简介

chili-request 使用 axois 来发送 http 请求,但尝试解决了 axios 里使用存在的几个缺陷:

  • axios 的 get/post 请求传参方式不一致
  • axios 没有明确的针对于每一个接口的响应数据拦截器

同时,chili-request 专注于解决 http 请求配置分散到项目各个角落的问题,实现在一个目录下管理所有 http 请求配置。

chili-request 专注于解决的另一个问题是:无法定义请求传参类型和响应数据类型。

安装

npm install chili-request

or

yarn chili-request

案例

  1. 全局配置(与 axios 配置基本一致)
import chiliReqBase from 'chili-request';
export default chiliReqBase({
  baseURL: config.apiUrl,
  interceptorReq: (request: any) => {
    ...
    // 请求发送前拦截器,可以对请求头进行统一处理。比如 携带自定义的 accessToken
    // 将处理后的请求头返回
    return request;
  },
  interceptorRes: (response: any) => {
    ...
    // 对获取到的响应数据进行统一处理
    // 比如对登录错误或其他类型错误进行统一处理
    return res
  }
});
  1. 书写 http 请求配置
// 响应数据类型/接口描述
export interface Res {
  [key:string]:any
}
 
// login 函数参数是接口请求调用传参的类型/接口描述
export default function login(data: { name: string; pwd: string }) {
  return {
    option: { 
      method: "GET", // http method
      url: "/login", // relative url
      data // params(get/post/delete/ 等一致)
    }
  };
}
 
  1. 使用 chiliReqlogin 发送请求
chiliReq<Res>(login(name: "", pwd: "")).then(res => {
  // res 的类型即 Res
}).catch() => {
 
}

基于 chili-request 实现的 restful-api 前端接口管理实现的目录一般如下图: 接口目录

支持

Give a ⭐️ if this project helped you!


This README was generated with ❤️ by readme-md-generator

Readme

Keywords

none

Package Sidebar

Install

npm i chili-request

Weekly Downloads

2

Version

1.2.6

License

MIT

Unpacked Size

73.2 kB

Total Files

41

Last publish

Collaborators

  • redchili