jc-use


jc-use

> 使用 useHooks 的方式处理问题

``powershell
yarn add jc-use
`



#### globalConfig

> globalConfig 保存了后面 Hooks 使用的一些配置。

`js
// main.js
import { globalConfig } from 'jc-use'

// default config
globalConfig.setData({
baseURL: '', // 基础路径
axiosHeaders: {}, // useAxios 请求头
fetchHeaders: {}, // useFetch 请求头
withCredentials: false, // 指示是否应使用凭据进行跨站点访问控制请求
successCodes: [200], // 接口请求成功的状态码集合
noAllowCodes: [401], // 无接口请求权限的状态码集合
requestTimeout: 30000, // 接口超时时间 0为不设置超时时间
apiDict: {
code: 'code', // 接口返回的状态码的字段名
data: 'data', // 接口返回数据的字段名
message: 'msg', // 接口返回报错信息的字段名
},
// 请求失败时的回调
errorMsgHandle: (msg: string, status: number | string) => {
console.error(msg, status);
},
// 无接口请求权限时的回调
noAllowHandle: (msg: string) => {
console.error(msg);
},
})
console.log(globalConfig.baseURL)
`



#### useAxios

> 使用Axios发送http请求
>
> api.apiString([$,] config: {})

###### config

- params GET请求参数，json格式
- data POST请求参数，json格式
- useForm 是否使用表单提交， 把post, put, patch, delete请求改为表单提交，默认为 false。
- useUpload 是否使用表单上传提交， 可以通过 FormData 对象上传文件，默认为 false。
- timeout 超时时间，默认为 globalConfig 中的 timeout。
- headers 请求头
- baseURL 不使用globalConfig设置的baseURL，单独指定baseURL

`js
const api = useAxios()

// 设置请求头
api.setAxiosHeaders({ ...headers })

// $ 替换path中的参数
// GET /users/{userId}/books =>
const userId = 1
api.getUsers$Books(userId, { params: { page: 1, size: 10 } })

// 使用_保持其后的大写字母或_不变，即_S代替S, __代替_
// GET /users/groupQuery =>
api.getUsersGroup_Query({ params: { page: 1, size: 10 } })

// POST /users =>
api.postUsers({ data: { name: 'jc', age: 18 } })

// POST 表单 /users =>
api.postUsers({
data: { name: 'jc', age: 18 },
useForm: true
})

// POST 文件上传 /users =>
const data = new FormData()
const file = HTMLInputElement.files[0]
data.append('file', file)
api.postCommonUploadAttachment({
data,
useUpload: true
})
`



#### useFetch

>使用Fetch发送http请求，方法同上
>
>api.apiString([$,] config: {})

`js
const api = useFetch()

// 设置请求头
api.setFetchHeaders({ ...headers })

// http请求同 useAxios
`



#### usePoll

> 轮询
>
> 相较于直接使用 setInterval , usePoll 在轮询异步任务时，会在一次完成后才会延迟一定的时间进行下一次调用。

`js
const poll = usePoll()

// 开始轮询
let count = 0
poll.begin(async () => {
count++
console.log(count)
}, 3000)

// 停止轮询
poll.stop()
`



#### useRAF

> 更简单的使用 requestAnimationFrame 来做动画
>

`js
const render = ({ stop }) => {
// ...
if (...) {
// 根据条件停止动画
stop()
}
// ...
}
const rAF = useRAF(render)

// 获取浏览器刷新率，返回每秒传输帧数fps、相较于60FPS的倍率stepRate
const { fps, stepRate } = await rAF.getFps()
// 开始动画，执行 render 函数
rAF.begin()

// 手动停止动画
rAF.stop()
``