import { ref } from 'vue'; import type { Ref } from 'vue'; import type { AxiosInstance, AxiosRequestConfig } from 'axios'; import { useLoading, useBoolean } from '@/hooks'; import CustomAxiosInstance from './instance'; type RequestMethod = 'get' | 'post' | 'put' | 'delete'; interface RequestParam { url: string; method?: RequestMethod; data?: any; axiosConfig?: AxiosRequestConfig; } /** * 创建请求 * @param axiosConfig - axios配置 */ export function createRequest(axiosConfig: AxiosRequestConfig) { const customInstance = new CustomAxiosInstance(axiosConfig); /** * 异步promise请求 * @param param - 请求参数 * - url: 请求地址 * - method: 请求方法(默认get) * - data: 请求的body的data * - axiosConfig: axios配置 */ async function asyncRequest(param: RequestParam): Promise> { const { url } = param; const method = param.method || 'get'; const { instance } = customInstance; const res = (await getRequestResponse( instance, method, url, param.data, param.axiosConfig )) as Service.RequestResult; return res; } /** * get请求 * @param url - 请求地址 * @param config - axios配置 */ function get(url: string, config?: AxiosRequestConfig) { return asyncRequest({ url, method: 'get', axiosConfig: config }); } /** * post请求 * @param url - 请求地址 * @param data - 请求的body的data * @param config - axios配置 */ function post(url: string, data?: any, config?: AxiosRequestConfig) { return asyncRequest({ url, method: 'post', data, axiosConfig: config }); } /** * put请求 * @param url - 请求地址 * @param data - 请求的body的data * @param config - axios配置 */ function put(url: string, data?: any, config?: AxiosRequestConfig) { return asyncRequest({ url, method: 'put', data, axiosConfig: config }); } /** * delete请求 * @param url - 请求地址 * @param config - axios配置 */ function handleDelete(url: string, config: AxiosRequestConfig) { return asyncRequest({ url, method: 'delete', axiosConfig: config }); } return { get, post, put, delete: handleDelete }; } type RequestResultHook = { data: Ref; error: Ref; loading: Ref; network: Ref; }; /** * 创建hooks请求 * @param axiosConfig - axios配置 */ export function createHookRequest(axiosConfig: AxiosRequestConfig) { const customInstance = new CustomAxiosInstance(axiosConfig); /** * hooks请求 * @param param - 请求参数 * - url: 请求地址 * - method: 请求方法(默认get) * - data: 请求的body的data * - axiosConfig: axios配置 */ function useRequest(param: RequestParam): RequestResultHook { const { loading, startLoading, endLoading } = useLoading(); const { bool: network, setBool: setNetwork } = useBoolean(window.navigator.onLine); startLoading(); const data = ref(null) as Ref; const error = ref(null); function handleRequestResult(response: any) { const res = response as Service.RequestResult; data.value = res.data; error.value = res.error; endLoading(); setNetwork(window.navigator.onLine); } const { url } = param; const method = param.method || 'get'; const { instance } = customInstance; getRequestResponse(instance, method, url, param.data, param.axiosConfig).then(handleRequestResult); return { data, error, loading, network }; } /** * get请求 * @param url - 请求地址 * @param config - axios配置 */ function get(url: string, config?: AxiosRequestConfig) { return useRequest({ url, method: 'get', axiosConfig: config }); } /** * post请求 * @param url - 请求地址 * @param data - 请求的body的data * @param config - axios配置 */ function post(url: string, data?: any, config?: AxiosRequestConfig) { return useRequest({ url, method: 'post', data, axiosConfig: config }); } /** * put请求 * @param url - 请求地址 * @param data - 请求的body的data * @param config - axios配置 */ function put(url: string, data?: any, config?: AxiosRequestConfig) { return useRequest({ url, method: 'put', data, axiosConfig: config }); } /** * delete请求 * @param url - 请求地址 * @param config - axios配置 */ function handleDelete(url: string, config: AxiosRequestConfig) { return useRequest({ url, method: 'delete', axiosConfig: config }); } return { get, post, put, delete: handleDelete }; } async function getRequestResponse( instance: AxiosInstance, method: RequestMethod, url: string, data?: any, config?: AxiosRequestConfig ) { let res: any; if (method === 'get' || method === 'delete') { res = await instance[method](url, config); } else { res = await instance[method](url, data, config); } return res; }