Biteagle-service NPM

Biteagle-Service

遵循开放封闭原则，对 axios 拓展，增强其功能

安装

npm

npm install axios biteagle-service

yarn

yarn add axios biteagle-service

pnpm

pnpm add axios biteagle-service

需要同时安装 axios 和 biteagle-service，因为 biteagle-service 依赖于 axios

特性

请求路径支持动态路径参数
统一成功与错误的响应体
支持 TypeScript
FormData 也支持动态参数
支持全局注册请求/响应拦截器
支持全局注册成功/失败响应处理器
实例支持单独设置拦截器
实例支持单独设置处理器
调整 axios 拦截器的执行顺序
拦截器与处理器统一的使用方式

全局API

使用

普通使用

创建实例

import { createRequest } from 'biteagle-serivce'

const http = createRequest({ baseURL: '/api' })

发起请求

// 请求需要携带的参数
const params = {
  name: 'biteagle'
}

// 请求需要的配置，具体请参考 axios 请求配置
const config = {}

await http.request('get', '/data')(params[, config])

接受数据

const result = await http.request('get', '/data')(params)

// 返回的响应数据结构如下，无论是成功还是失败，统一都是以下结构
interface result {
  status: number
  data: any
  message: string
}

使用动态路径参数

正常情况

当 URL 路径上需要支持动态参数时，这很有用。

例如：/list/id，id 为动态时，可以写为 /list/:id

那么就可以按以下写法以支持动态参数：

http.request('get', '/list/:id')({
  _id: 123,
  name: 'xxx',
  age: 18
})

上述代码最终发起请求时的 URL 路径实际为：/list/123

如果请求方法是 post、put 等时，携带的参数为

{
  name: 'xxx',
  age: 18
}

如果请求方法是 get、delete 等时，携带的参数为

?name=xxx&age=18
// 会拼接在 url 路径上

冲突情况

假如要传递的参数中也是以 _xxx 的形式，与动态 URL 冲突时。可换成以下这种写法

const params = {
  _id: 123,
  name: 'xxx',
  age: 18
}

const config = {
  dynamic: {
    _id: 456
  }
}

http.request('get', '/list/:id')(params, config)

最终的 URL 将会是：/list/456，而不是 /list/123

FormData

const fd = new FormData()
fd.append('file', file)

const config = {
  dynamic: {
    _id: '123'
  }
}

http.request('get', '/list/:id/upload')(fd, config)
// url => /list/123/upload