imba-uni-request/README.md

uniapp框架封装的请求包 imba-uni-request

uni-app 框架封装的请求包

## 安装

```
# pnpm
pnpm i imba-uni-request
```

## 使用

### 初始化和初始配置

```
import { ImbaUniRequest } from 'imba-uni-request'

const http = new ImbaUniRequest({
  /**
   *  `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
   *  它可以通过设置一个 `baseURL` 便于为实例的方法传递相对 URL
   */
  baseURL: 'http://localhost',
  /**
   * 超时时间，单位毫秒
   * 默认 30s = 1000 * 30
   */
  timeout: 1000 * 30,
  /**
   * 设置请求的 header，header 中不能设置 Referer。
   * 平台差异说明：App、H5端会自动带上cookie，且H5端不可手动修改
   */
  headers: { 'content-type': 'application/json;charset=UTF-8' },
  /**
   * 缓存&SWR 是否开启
   * 默认 true
   */
  cacheBool: true,
  /**
   * 缓存&SWR 缓存时间 默认分单位 mm
   * 默认 -1
   */
  cacheTime: 1,
  /**
   * 缓存&SWR 缓存单位 mm | ss
   * 默认 mm
   */
  cacheUnit: 'mm',
  /**
   * 是否请求错误后重试
   * 默认 true
   */
  retryBool: true,
  /**
   * 请求重试错误次数
   * 默认 1
   */
  retryCount: 1,
  /**
   * 重试内时间定位 单位秒
   * 默认 3
   */
  retryInterval: 3,
  /**
   * 分页字段设置
   */
  pageKey: ['page', 'size'],
  /**
   * 打印API接口地址是否MD5化
   */
  printMD5: false,
  /**
   * 是否开启打印请求数据
   */
  printConsole: true,
})
console.log('%c [ http ]-86', 'font-size:14px; background:#41b883; color:#ffffff;', http)
```

### 请求拦截和响应拦截设定

### tips：注意拦截器追加的位置 如下洋葱执行走向。

```
// 拦截流程 请求拦截2 -> 请求拦截1 -> 发送请求 -> 响应拦截1 -> 响应拦截2 -> ...

const testAsync = (config: any) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(config)
    }, 300)
  })
}

// function 请求拦截1 - 执行位置4
http.interceptors.request.use((config) => {
  config.header = Object.assign(config.header || {}, {
    xxx: 'xxx'
  })
  return config
})

// async await 请求拦截2 - 执行位置3
http.interceptors.request.use(async (config) => {
  const result = await testAsync({ yyy: 'test async await' })
  config.header = Object.assign(config.header || {}, result)
  return config
})

// promise 请求拦截3 - 执行位置2
http.interceptors.request.use((config) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      config.header = Object.assign(config.header || {}, { zzz: 'test Promise' })
      resolve(config)
    }, 300)
  })
})

// function 请求拦截4 - 执行位置1
http.interceptors.request.use((config) => {
  config.body = Object.assign(config.body || {}, { qqq: '来自拦截器注入' })
  return config
})

// 响应拦截
http.interceptors.response.use((res) => {
  if (res?.errMsg === 'request:fail') {
    return false
  }
  const { code, data } = res.data
  if (code === 200) return data
  return data
})
```

### GET 请求 api/xxx/:id 形式 => api/xxx/1?id=1

```
http.request(['/api/test/:id', 'GET'],
{
  _param: { id: 1 },
  _id: `${1}`
})
```

### POST 请求 api/xxx/:id 形式 => api/xxx/2?id=2 请求体 row json => { body: 'value' }

```
http.request(['/api/test/:id', 'POST'],
{
  _param: { id: 2 },
  _body: { title: 'value' },
  _id: `${2}`
})
```

### POST 请求修改为 PUT 请求

```
http.request(['/api/test/put', 'POST'],
{
  _body: { id: 3 },
  _method: 'PUT'
})
```

### POST 请求分页

```
http.request(['/api/test/post', 'POST'],
{
  _body: { id: 4 },
  _page: [1, 10]
})
```

### GET 请求分页

```
 http.request(['/api/test/get', 'GET'],
{
  _param: { id: 5 },
  _page: [1, 10]
})
```

### POST 请求分页

```
http.request(['/api/test/post', 'POST'],
{
  _body: { id: 6 },
  _page: [1, 10]
})
```

### GET 请求分页 缓存&SWR

```
http.request(['/api/test/get', 'GET'],
{
  _param: { id: 7 },
  _cache: 10,
  _cacheUnit: 'ss'
})
```

### 多个重复请求 并列为一个请求返回

```
http.request(['/api/test/get', 'GET'], { _param: { id: 8 } })
http.request(['/api/test/get', 'GET'], { _param: { id: 8 }, _repeatMergeBool: false })
http.request(['/api/test/get', 'GET'], { _param: { id: 8 } })
http.request(['/api/test/get', 'GET'], { _param: { id: 8 } })
```

### 尝试错误请求 自动重试请求

```
http.request('/api/test', { _retryInterval: 0 }, { url: '//error.com' })
```