YYAPI 基于 Axios 集约型 API 接口管理模块 - 文章教程

YYAPI 基于 Axios 集约型 API 接口管理模块

发布于 2021-09-08 字数 2907 浏览 805 评论 0

安装

yarn add yyapi
# 或者
npm i yyapi

使用

基本使用

import { createAPI, API, Sender, Method } from 'yyapi'

interface CustomAPI extends API{
  test1: Sender
  test2: Sender<{ id: number }>
}

// 实例化
const api = createAPI<CustomAPI>({
  test1: '接口地址',
  test2: {
    url: '接口地址',
    method: Method.Put
  }
}, {
  headers: {
    token: '1234567890'
  }
}, {
  async onBeforeRequest ({ namespace, url, config }) {
    // 发送请求前回调,可用于注入 headers 参数等功能
    // namespace 命名空间,如 test1、test2
    // url 请求的 <Url> 参数
    // config 请求的参数
    config.headers.token = '0987654321'
    console.log('onBeforeRequest', namespace)
  },
  async onBeforeReturnResponse ({ namespace, url, config, response }) {
    // 请求成功后,还未返回数据前的回调,可用于动态包裹返回数据等功能
    console.log('onBeforeReturnResponse', response.status)
  },
  async onError ({ namespace, url, config, error }) {
    // 请求失败回调,可用于统一接口请求失败上报等功能
    console.log('onerror', error.message)
  }
})

// 请求接口
api.test1() // Promise<any>
api.test2() // Promise<{ id: number }>

配置项

createAPI(<Urls>, <AxiosRequestConfig?>, <Events?>)

Data

import { createAPI, API, Sender } from 'yyapi'

// 定义请求数据类型
interface RequestData {
  id: number
}

// 定义返回数据类型
interface ResponseData {
  name: string
}

interface CustomAPI extends API {
  test: Sender<ResponseData, RequestData>
}

const api = createAPI<CustomAPI>({
  test: '接口地址'
})

// Get 请求会自动转为 url 参数
api.test(<RequestData>) // Promise<ResponseData>

Keys

import { createAPI, API, Sender } from 'yyapi'

// 定义请求数据类型
interface RequestData {
  id: number
}

// 定义请求配置数据类型
interface RequestConfig {
  keys: {
    id: number
  }
}

// 定义返回数据类型
interface ResponseData {
  name: string
}

interface CustomAPI extends API {
  test: Sender<ResponseData, RequestData, RequestConfig>
}

const api = createAPI<CustomAPI>({
  test: '接口地址/:id'
})

// 配置 keys 自动注入 url 参数
api.test(<RequestData>, <RequestConfig>) // Promise<ResponseData>

项目地址:https://www.npmjs.com/package/yyapi

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
83593 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0