在react 中结合antd ts语法封装axios请求

野性酷女 2023-06-12 08:36 8阅读 0赞

## 封装axios请求 ##

HttpClients.ts 文件

import axios from 'axios'
    import {  loadProgressBar } from 'axios-progress-bar'
    import 'axios-progress-bar/dist/nprogress.css'
    import * as Login from '@utils/Login'
    import {  message } from 'antd'
    // 自定义判断元素类型JS
    function toType(obj) { 
    	return ({ }).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
    }
    // 参数过滤函数
    function filterNull(o) { 
    	Object.keys(o).map(key => { 
    		if (o[key] === null) { 
    			delete o[key]
    		}
    		if (toType(o[key]) === 'string') { 
    			o[key] = o[key].trim()
    		} else if (toType(o[key]) === 'object') { 
    			o[key] = filterNull(o[key])
    		} else if (toType(o[key]) === 'array') { 
    			o[key] = filterNull(o[key])
    		}
    	})
    	return o
    }
    /** * * * @param {String} method Ajax请求类型 'POST'|'PUT'|'GET'|'DELETE' * @param {String} url 请求地址 * @param {Object} params 参数 * @returns Promise<T> */
    function apiAxios(method, url, params) { 
    	if (params) { 
    		params = filterNull(params)
    	}
    	return new Promise((resolve, reject) => { 
    		if (!Login.default.GetLoginState()) { 
    		}
    		loadProgressBar()
    		axios.defaults.headers.common.Authorization = localStorage.getItem('accessToken')
    		axios({ 
    			method,
    			url,
    			data: method === 'POST' || method === 'PUT' ? params : null,
    			params: method === 'GET' || method === 'DELETE' || method === 'PATCH' ? params : null,
    			withCredentials: false
    		})
    			.then((res) => { 
    				if (res.data.msg === 'Token已过期') { 
    					message.error('Token已过期')
    					window.location.href = '/#/login'
    				}
    				if (res.status === 200) { 
    					resolve(res)
    				} else { 
    					reject('Axios返回状态不对，查看请求处理过程．．．．')
    				}
    			}, err => { 
    				reject(err)
    				const errCode = err.response.status
    				const msg = err.response.message
    				if (msg === 'Token已过期') { 
    					message.error('身份过期，请重新登录')
    					window.location.href = '#/login'
    				}
    				switch (errCode) { 
    					case 400:
    						console.log('错误请求')
    						break
    					case 401:
    						// 权限处理 重新登录 清空token
    						message.error('请检查用户名和密码')
    						window.location.href = '#/login'
    						break
    					case 403:
    						message.error('身份过期请重新登录', 3)
    						window.location.href = '#/login'
    						break
    					case 404:
    						message.error('请求错误,未找到该资源')
    						console.log('请求错误,未找到该资源')
    						break
    					case 405:
    						console.log('请求方法未允许')
    						break
    					case 408:
    						console.log('请求超时')
    						break
    					case 500:
    						message.error('服务器端出错')
    						console.log('服务器端出错')
    						break
    					case 501:
    						console.log('网络未实现')
    						break
    					case 502:
    						console.log('网络错误')
    						break
    					case 503:
    						console.log('服务不可用')
    						break
    					case 504:
    						console.log('网络超时')
    						break
    					default:
    						message.error('未知错误')
    				}
    
    			})
    			.catch((err) => { 
    				const errInfo = {  'err': err.response }
    				reject(errInfo)
    			})
    	})
    }
    export default { 
    	get: (url, params) => { 
    		return apiAxios('GET', url, params)
    	},
    	post: (url, params) => { 
    		return apiAxios('POST', url, params)
    	},
    	put: (url, params) => { 
    		return apiAxios('PUT', url, params)
    	},
    	delete: (url, params) => { 
    		return apiAxios('DELETE', url, params)
    	},
    	patch: (url, params) => { 
    		return apiAxios('PATCH', url, params)
    	}
    }

定义api文件

import HttpClient from './HttpClient'
    export function GetData(param) { 
        return HttpClient.get(`/api/getData`, { param})
    }
    export default { 
        GetData
    }

在组件中使用

import {  GetData } from './api.ts'
    getDaTA = () => { 
        const param = { }
        GetData(param).then((res: any) => { 
            console.log(res)
        }) 
    }

打个样，欢迎指错