@ugreen-fe/apis v0.0.1

@ugreen-fe/apis

基于 axios 封装的接口管理方案

主要功能

• 接口统一管理
• 可配置多个接口服务
• 支持 restful 接口

• 支持命名空间

使用

安装

$ pnpm install @ugreen-fe/apis

使用示例

import Apis from '@ugreen-fe/apis';

// 支持配置多个后端服务
const serverMap = {
  baseServer: {
    default: true,
    baseURL: "https://base.apis.com"
  },
  adminServer: {
    baseURL: "https://admin.apis.com"
  }
}

// 声明api
const apiMap = {
  getBaseInfo: {
    method: "get",
    url: "/info/:id"
  },
  getAdminInfo: {
    server: "adminServer",
    method: "get",
    url: "/info"
  }
}

// 生成 apis 实例
const apis = Apis.create(serverMap, apisMethod);

// 业务代码调用
async function getBaseInfo() {
  // 最终请求地址：https://base.apis.com/info/1?name=test
  const res = await apis.getBaseInfo({
    rest: {
      id: 1
    },
    params: {
      name: 'test'
    }
  })
}

API

Apis.create<ApisResponse>(serverMap, apiMap, config);

Response 类型

请求接口返回的数据类型，默认为：ApisResponse。
自定义可以通过，Apis.create 泛型参数进行全局设置。
每个方法的第二个泛型参数也可进行独立设置，例： apis.getBaseInfoId<string[], {error: string; errorMsg: string}>()

参数

serverMap

• serverMap 是服务配置的 map 对象
• 服务的参数配置同 axios 中的 config 部分
• default 为自定义属性，当 default 为 true 时，api 会使用它做为默认服务配置

{
  "baseServer": {
    "default": true,
    "baseUrl": "https://base.apis.com"
  }
}

apiMap

• apiMap 是接口配置的 map 对象
• 接口的参数配置同 axios 中的 config 部分，会覆盖服务配置中的参数
• server 为自定义属性，表示使用哪个服务配置，当 server 为 null 时，表示使用默认服务配置

{
  "getBaseInfo": {
    "method": "get",
    "url": "/info",
  }
}

Custom

rest：restful 参数

当接口中需要传递 restful 参数时，按如下配置

配置时用:标记：

// request method - GET
{
  "getBaseInfoId": {
    "method": "get",
    "url": "/info/:id"
  }
}

调用时参数中添加 rest 参数：

apis.getBaseInfoId({
  rest: {
    id: 1
  }
});

PUT、POST、DELETE

涉及到 HTTP-Request 携带 Request-Body 时

// request method - POST
{
  "postCreateInfo": {
    "method": "post",
    "url": "/info"
  }
}

apis.postCreateInfo({
  data: {
    name: 'jerry',
    age: 18
  }
})

调用请求传参和 Axios 保持一致，即：

// axios-lib/index.d.ts

export interface AxiosRequestConfig {
  url?: string;
  method?: string;
  baseURL?: string;
  transformRequest?: AxiosTransformer | AxiosTransformer[];
  transformResponse?: AxiosTransformer | AxiosTransformer[];
  headers?: any;
  params?: any;
  paramsSerializer?: (params: any) => string;
  data?: any;
  timeout?: number;
  withCredentials?: boolean;
  adapter?: AxiosAdapter;
  auth?: AxiosBasicCredentials;
  responseType?: string;
  xsrfCookieName?: string;
  xsrfHeaderName?: string;
  onUploadProgress?: (progressEvent: any) => void;
  onDownloadProgress?: (progressEvent: any) => void;
  maxContentLength?: number;
  validateStatus?: (status: number) => boolean;
  maxRedirects?: number;
  httpAgent?: any;
  httpsAgent?: any;
  proxy?: AxiosProxyConfig | false;
  cancelToken?: CancelToken;
  ...
}

Interceptors

Apis 实例通过useReq,useRes两个接口对请求做拦截，可以多次调用，添加多个 middleware

instance.useReq(middleware)

同 axios.interceptors.request.use

apis.useReq(function(config) {
  config.headers.Authorization = "Bearer";
  return config;
});

instance.useRes(middleware)

同 axios.interceptors.response.use

apis.useRes(function(res) {
  res.msg = "ok";
  return res;
});