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: 'i am body man' }

http.request(['/api/test/:id', 'POST'],
{
	_param: { id: 2 },
	_body: { title: 'i am body man' },
	_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' })