fetch请求返回的统一拦截 https://www.jb51.net/article/176925.htm
https://github.com/liubin915249126/javascript

错误信息

  1. const codeMessage = {
  2.   200: '服务器成功返回请求的数据。',
  3.   201: '新建或修改数据成功。',
  4.   202: '一个请求已经进入后台排队（异步任务）。',
  5.   204: '删除数据成功。',
  6.   400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  7.   401: '用户没有权限（令牌、用户名、密码错误）。',
  8.   403: '用户得到授权，但是访问是被禁止的。',
  9.   404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  10.   406: '请求的格式不可得。',
  11.   410: '请求的资源被永久删除，且不会再得到的。',
  12.   422: '当创建一个对象时，发生一个验证错误。',
  13.   500: '服务器发生错误，请检查服务器。',
  14.   502: '网关错误。',
  15.   503: '服务不可用，服务器暂时过载或维护。',
  16.   504: '网关超时。',
  17. }

AjaxRequest请求封装

  1. import qs from 'qs'
  3. const host = process.env.host
  5. interface ConfigProps extends RequestInit {
  6.     token?: stirng;
  7.   data?: object
  8. }
  10. async function http(url: string, props: ConfigProps = {}) {
  11.   const {data, token, headers, ...arg} = props
  13.   const params = {
  14.       method: 'POST',
  15.     headers: {
  16.         "Content-Type": data ? "application/json" : "",
  17.       "Authorization": token ? `Bearer ${token}` : "",
  18.     },
  19.     ...config
  20.   }
  22.   // get请求拼接 url
  23.   if(params.method.toLocalUpperCase() === 'GET') {
  24.       url += `?${qs.stringify(data)}`
  25.   }
  26.   else {
  27.       params.body = JSON.stringify(data || {})
  28.   }
  30.   url += host + '/' + url
  32.     return window.fetch(url, params)
  33.   .then(async res => {
  34.     const {status, code} = res
  35.       if(status === 401) {
  36.         await auth.logout()
  37.       window.location.reload()
  38.       return Promise.reject({message: '请重新登录'})
  39.     }
  41.     const data = await res.json()
  42.     if (code) {
  43.       return Promise.reject(data)
  44.     }
  45.     return data
  46.   })
  47.   .fanally()
  48.   .catch()
  49. }
  51. export default http

useHttp使用fetch

  1. function useHttp() {
  2.     const {user} = useAuth()
  4.   return (...[url, params]: Parameters<typeof http>) => 
  5.       http(url, {...params, token: user.token})
  6. }
  8. export defalut useHttp

组件使用

  1. import {useHttp} from '@hooks/useHttp'
  3. function List() {
  4.   const [list, setList] = useState([])
  6.     useEffect(() => {
  7.     const data = cleanObject(debounceParams)
  8.       useHttp('list', {data}).then(setList)
  9.   }, [])
  10. }

fetch封装参考 https://blog.csdn.net/RRRRRDong/article/details/111468203