封装请求hook

This commit is contained in:
2022-05-09 10:00:32 +08:00
parent f326656ed7
commit 050f90433c
13 changed files with 191 additions and 95 deletions
+97 -81
View File
@@ -1,54 +1,75 @@
import Taro from '@tarojs/taro'
import { useState } from 'react'
import { useRef, useState } from 'react'
import qs from 'qs';
/**
* 返回状态信息,根据 http 状态错
* @param {Number} status
* @returns
*/
const showStatus = (status) => {
let message = ''
switch (status) {
case 400:
message = '请求错误(400)'
break
case 401:
message = '未授权,请重新登录(401)'
break
case 403:
message = '拒绝访问(403)'
break
case 404:
message = '请求出错(404)'
break
case 408:
message = '请求超时(408)'
break
case 500:
message = '服务器错误(500)'
break
case 501:
message = '服务未实现(501)'
break
case 502:
message = '网络错误(502)'
break
case 503:
message = '服务不可用(503)'
break
case 504:
message = '网络超时(504)'
break
case 505:
message = 'HTTP版本不受支持(505)'
break
default:
message = `连接出错(${status})!`
}
return `${message},请检查网络或联系管理员!`
type Params = {
code: string|null
success: true|false
data: any,
msg: string,
loading: true|false,
error: any,
query: any,
filter: any,
sort: any,
total: number,
multiple: true|false, // 请求多次
count: number, // 第几次请求
token: string, // token
page?: number,
pageSize?: number
}
/**
* 返回状态信息,根据 http 状态错
* @param {Number} status
* @returns
*/
const showStatus = (status) => {
let message = ''
switch (status) {
case 400:
message = '请求错误(400)'
break
case 401:
message = '未授权,请重新登录(401)'
break
case 403:
message = '拒绝访问(403)'
break
case 404:
message = '请求出错(404)'
break
case 408:
message = '请求超时(408)'
break
case 500:
message = '服务器错误(500)'
break
case 501:
message = '服务未实现(501)'
break
case 502:
message = '网络错误(502)'
break
case 503:
message = '服务不可用(503)'
break
case 504:
message = '网络超时(504)'
break
case 505:
message = 'HTTP版本不受支持(505)'
break
default:
message = `连接出错(${status})!`
}
return `${message},请检查网络或联系管理员!`
}
/**
@@ -69,28 +90,25 @@ export const useRequest = (options = {
pagination: false, // 是否分页
}) => {
let params:any = {
let params:Params = {
code: null, // 业务码
success: null, // 请求是否成功
success: false, // 请求是否成功
data: {},
msg: '',
loading: null,
loading: false,
error: null,
query: {},
filter: null,
sort: null,
sort: '',
total: 0,
multiple: true, // 请求多次
count: 0, // 第几次请求
token: '', // token
}
if(options.pagination) {
params.page = options.page
params.pageSize = options.pageSize
}
const [state, setState] = useState({...params})
const stateRef = useRef({...params})
const [state, setState] = useState({...stateRef.current})
// // 每页多少条记录
// const handleSizeChange = (val) => {
@@ -120,7 +138,7 @@ export const useRequest = (options = {
// eslint-disable-next-line
const handleSort = (val, orderby = "desc") => {
if (val != null) {
state.sort = orderby ? {
stateRef.current.sort = orderby ? {
sort_key: `${orderby == 'desc' ? '-' + val : val}`
} : null
}
@@ -129,16 +147,16 @@ export const useRequest = (options = {
// 请求函数
const fetchData = async (sub_options) => {
state.loading = true
state.query = {
stateRef.current.loading = true
setState((e) => ({...e, loading:true}))
stateRef.current.query = {
...sub_options,
...options.pagination && {
page: state.page,
size: state.size,
page: stateRef.current.page,
size: stateRef.current.pageSize,
},
...state.filter,
...state.sort
...stateRef.current.filter,
...stateRef.current.sort
}
try {
let token = Taro.getStorageSync('token')
@@ -147,13 +165,13 @@ export const useRequest = (options = {
...{
header: {
"Platform": 3,
"Authorization": token || state.token,
"Authorization": token || stateRef.current.token,
}
},
...options.method?.toUpperCase() == 'GET' ? {
data: state.query
data: stateRef.current.query
} : {
data: options.type?.toUpperCase() == 'FORMDATA' ? qs.stringify(state.query) : state.query
data: options.type?.toUpperCase() == 'FORMDATA' ? qs.stringify(stateRef.current.query) : stateRef.current.query
}
}
const result = await Taro.request(q as any)
@@ -165,11 +183,11 @@ export const useRequest = (options = {
} = result.data
console.log(code, msg, data, statusCode);
if (statusCode === 200) {
state.success = (code === 0 ? true : false)
state.code = code
state.msg = msg
state.data = data
state.total = data?.list ? data?.total : 0
stateRef.current.success = (code === 0 ? true : false)
stateRef.current.code = code
stateRef.current.msg = msg
stateRef.current.data = data
stateRef.current.total = data?.list ? data?.total : 0
}else{
Taro.showToast({
title: `错误:${showStatus(statusCode)}`
@@ -183,22 +201,20 @@ export const useRequest = (options = {
}
} catch (e) {
console.log('出错', e);
state.success = false
state.error = true
state.msg = e.errMsg
stateRef.current.success = false
stateRef.current.error = true
stateRef.current.msg = e.errMsg
}
state.error = false
state.loading = false
stateRef.current.error = false
stateRef.current.loading = false
setState(() => stateRef.current)
}
return {
// handleSizeChange,
// handleCurrentChange,
// handleFilterChange,
handleSort,
fetchData,
state,
}
}