diff --git a/locales/en-US.json b/locales/en-US.json index b3bf217f..1eac2219 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -5,7 +5,8 @@ "RelyAbout": "Rely About", "Error": "Error Page", "Echart": "Chart", - "scrollReveal": "Scroll Reveal" + "scrollReveal": "Scroll Reveal", + "Axios": "Axios Request" }, "LayoutHeaderTooltipOptions": { "Reload": "Reload Current Page", diff --git a/locales/zh-CN.json b/locales/zh-CN.json index d3ebbc3a..988a7d39 100644 --- a/locales/zh-CN.json +++ b/locales/zh-CN.json @@ -5,7 +5,8 @@ "RelyAbout": "关于", "Error": "错误页", "Echart": "可视化", - "scrollReveal": "滚动动画" + "scrollReveal": "滚动动画", + "Axios": "请求" }, "LayoutHeaderTooltipOptions": { "Reload": "刷新当前页面", diff --git a/package.json b/package.json index 2fb98b92..0bf7f942 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "dependencies": { "@vueuse/core": "^9.1.0", "amfe-flexible": "^2.2.1", - "axios": "^0.27.2", + "axios": "^1.2.0", "crypto-js": "^4.1.1", "echarts": "^5.4.0", "lodash-es": "^4.17.21", diff --git a/src/axios/api/test.ts b/src/axios/api/test.ts index 21e10ab7..f8a5d2f2 100644 --- a/src/axios/api/test.ts +++ b/src/axios/api/test.ts @@ -1,9 +1,14 @@ -import request from '../request' +import useRequest from '../index' -export const useAxiosTest = () => { - return request({ - method: 'post', - url: '', - data: '', +/** + * + * @returns 测试 + * + * @medthod get + */ +export const onAxiosTest = async (city: string) => { + return useRequest({ + method: 'get', + url: `https://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz&city=${city}`, }) } diff --git a/src/axios/index.ts b/src/axios/index.ts new file mode 100644 index 00000000..ae4a3685 --- /dev/null +++ b/src/axios/index.ts @@ -0,0 +1,28 @@ +import request from './instance' + +import type { AxiosRequestConfig } from 'axios' + +let controller: AbortController + +const useRequest = (config: AxiosRequestConfig) => { + controller && controller.abort() // 调用控制器, 取消请求 + + controller = new AbortController() // 实例化控制器对象(可以中止一个或多个 `Web` 请求) + + const cfg = Object.assign(config, { + signal: controller.signal, // 取消请求信号 + }) + + return request(cfg) +} + +export default useRequest + +/** + * + * 使用 `axios` 实例 + * + * 可以自动取消重复请求部分 + * + * 使用该方法进行二次的请求封装, 然后可以使用 `import { xxx } from '@use-api/xxx' 导入 + */ diff --git a/src/axios/request.ts b/src/axios/instance.ts similarity index 53% rename from src/axios/request.ts rename to src/axios/instance.ts index 427c1862..e9fbd567 100644 --- a/src/axios/request.ts +++ b/src/axios/instance.ts @@ -1,7 +1,28 @@ import axios from 'axios' - import { useDetermineEnv } from '@use-utils/hook' +import type { RawAxiosRequestHeaders, AxiosRequestConfig } from 'axios' +import type { RequestHeaderOptions } from './type' + +/** + * + * @param instance axios instance + * @param options axios headers options + * + * @note + * 自定义 `axios` 请求头配置 + */ +const appendRequestHeaders = ( + instance: AxiosRequestConfig, + options: RequestHeaderOptions[], +) => { + const requestHeaders = instance.headers as RawAxiosRequestHeaders + + options.forEach((curr) => { + requestHeaders[curr.key] = curr.value + }) +} + const server = axios.create({ baseURL: '', // `import.meta.env`, withCredentials: false, // 是否允许跨域携带 `cookie` @@ -20,6 +41,8 @@ server.interceptors.request.use( // TODO: 测试环境 } + appendRequestHeaders(request, [{ key: 'X-TOKEN', value: 'token' }]) // 自定义请求头 + return request }, (error) => { @@ -39,3 +62,10 @@ server.interceptors.response.use( ) export default server + +/** + * + * 请求, 响应拦截器 + * + * 可在此实现共享的基础配置 + */ diff --git a/src/axios/type.ts b/src/axios/type.ts new file mode 100644 index 00000000..81dd2749 --- /dev/null +++ b/src/axios/type.ts @@ -0,0 +1,14 @@ +import type { AxiosHeaders } from 'axios' + +export type AxiosHeaderValue = + | AxiosHeaders + | string + | string[] + | number + | boolean + | null + +export interface RequestHeaderOptions { + key: string + value: AxiosHeaderValue +} diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx index 9c2eb191..eac22a25 100644 --- a/src/components/RayChart/index.tsx +++ b/src/components/RayChart/index.tsx @@ -305,9 +305,11 @@ const RayChart = defineComponent({ * * 自动跟随模板主题或者指定主题皆可 */ - props.autoChangeTheme || props.theme - ? renderChart('dark') - : renderChart('') + if (props.autoChangeTheme || props.theme) { + themeValue.value ? renderChart('dark') : renderChart('') + } else { + renderChart('') + } }, ) diff --git a/src/icons/axios.svg b/src/icons/axios.svg new file mode 100644 index 00000000..7c12ac06 --- /dev/null +++ b/src/icons/axios.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/icons/cancel_fullscreen.svg b/src/icons/cancel_fullscreen.svg deleted file mode 100644 index 9fe921ec..00000000 --- a/src/icons/cancel_fullscreen.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index 4a8968b5..a68aaf07 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,8 +1,9 @@ -import type { App } from 'vue' import { createRouter, createWebHashHistory } from 'vue-router' import { constantRoutes } from './routes' import { getCache } from '@/utils/cache' +import type { App } from 'vue' + export const router = createRouter({ history: createWebHashHistory(), routes: constantRoutes, diff --git a/src/router/modules/axios.ts b/src/router/modules/axios.ts new file mode 100644 index 00000000..3822cca5 --- /dev/null +++ b/src/router/modules/axios.ts @@ -0,0 +1,9 @@ +export default { + path: '/axios', + name: 'axios', + component: () => import('@/views/axios/index'), + meta: { + i18nKey: 'Axios', + icon: 'axios', + }, +} diff --git a/src/router/modules/index.ts b/src/router/modules/index.ts index 52b85105..a3493522 100644 --- a/src/router/modules/index.ts +++ b/src/router/modules/index.ts @@ -3,8 +3,9 @@ import reyl from './rely' import error from './error' import echart from './echart' import scrollReveal from './scroll-reveal' +import axios from './axios' -const routes = [dashboard, echart, scrollReveal, error, reyl] +const routes = [dashboard, echart, axios, scrollReveal, error, reyl] export default routes diff --git a/src/views/axios/index.scss b/src/views/axios/index.scss new file mode 100644 index 00000000..5cac4b4e --- /dev/null +++ b/src/views/axios/index.scss @@ -0,0 +1,3 @@ +.axios-header__btn { + height: 64px; +} diff --git a/src/views/axios/index.tsx b/src/views/axios/index.tsx new file mode 100644 index 00000000..6716841e --- /dev/null +++ b/src/views/axios/index.tsx @@ -0,0 +1,90 @@ +import './index.scss' +import { + NCard, + NLayout, + NDataTable, + NLayoutContent, + NLayoutHeader, + NSpace, + NInput, +} from 'naive-ui' +import { onAxiosTest } from '@use-api/test' + +const Axios = defineComponent({ + name: 'Axios', + setup() { + const state = reactive({ + weatherData: [] as IUnknownObjectKey[], + inputCityValue: '', + }) + const columns = [ + { + title: '空气指数', + key: 'air', + }, + { + title: '风速', + key: 'win_meter', + }, + { + title: '能见度', + key: 'visibility', + }, + { + title: '天气情况', + key: 'wea_day', + }, + { + title: '提示', + key: 'air_tips', + }, + ] + + const handleInputCityValue = async (value: string) => { + const cb = await onAxiosTest(value) + + state.weatherData = cb.data as unknown as IUnknownObjectKey[] + } + + onBeforeMount(async () => { + const cb = await onAxiosTest('成都') + state.weatherData = cb.data as unknown as IUnknownObjectKey[] + }) + + return { + ...toRefs(state), + columns, + handleInputCityValue, + } + }, + render() { + return ( + + + + 基于 axios 封装, 能够自动取消连续请求, 避免重复渲染造成问题. + 可在该示例中测试, 并且打开控制台的网络选项卡查看 + + + + + + + + + + + + ) + }, +}) + +export default Axios diff --git a/src/views/echart/index.tsx b/src/views/echart/index.tsx index d0489576..848cf7f6 100644 --- a/src/views/echart/index.tsx +++ b/src/views/echart/index.tsx @@ -202,7 +202,7 @@ const Echart = defineComponent({
在使用该组件时, 一定要注意根组件的高度初始化问题, - 如果需要使用其余的图利, 需要自己手动去注册. + 如果需要使用其余的图例, 需要自己手动去注册. 该组件实现了自动跟随模板主题切换功能, 但是动态切换损耗较大, 所以默认不启用