新增请求方法

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",

locales/zh-CN.json

@@ -5,7 +5,8 @@
     "RelyAbout": "关于",
     "Error": "错误页",
     "Echart": "可视化",
-    "scrollReveal": "滚动动画"
+    "scrollReveal": "滚动动画",
+    "Axios": "请求"
   },
   "LayoutHeaderTooltipOptions": {
     "Reload": "刷新当前页面",

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",

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}`,
   })
 }

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' 导入
+ */

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<unknown>,
+  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
+
+/**
+ *
+ * 请求, 响应拦截器
+ *
+ * 可在此实现共享的基础配置
+ */

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
+}

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('')
+        }
       },
     )
 

src/icons/axios.svg

@@ -0,0 +1,3 @@
+<svg t="1670221189479" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1642" width="64" height="64">
+  <path fill="currentColor" d="M810.666667 648.533333V298.666667c0-46.933333-38.4-85.333333-85.333334-85.333334h-85.333333V85.333333l-170.666667 170.666667 170.666667 170.666667V298.666667h85.333333v349.866666c-51.2 17.066667-85.333333 64-85.333333 119.466667 0 72.533333 55.466667 128 128 128s128-55.466667 128-128c0-55.466667-34.133333-102.4-85.333333-119.466667zM768 810.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667 42.666667 17.066667 42.666667 42.666667-17.066667 42.666667-42.666667 42.666667zM384 256c0-72.533333-55.466667-128-128-128S128 183.466667 128 256c0 55.466667 34.133333 102.4 85.333333 119.466667v268.8c-51.2 17.066667-85.333333 64-85.333333 119.466666 0 72.533333 55.466667 128 128 128s128-55.466667 128-128c0-55.466667-34.133333-102.4-85.333333-119.466666V375.466667C349.866667 358.4 384 311.466667 384 256zM256 810.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667 42.666667 17.066667 42.666667 42.666667-17.066667 42.666667-42.666667 42.666667zM256 298.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667 42.666667 17.066667 42.666667 42.666667-17.066667 42.666667-42.666667 42.666667z" p-id="1643"></path>
+</svg>

src/icons/cancel_fullscreen.svg

@@ -1,5 +0,0 @@
-<svg t="1669351467526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14248" width="200" height="200">
-  <path d="M724.81 225.5v454.85H162V225.5h562.81m64-64H98v582.85h690.8V161.5h0.01z" fill="currentColor" p-id="14249"></path>
-  <path d="M788.81 284.77V159.5H98v582.85h152.55V866.6h677.74V284.77H788.81zM162 223.5h562.8v454.85H162V223.5z m702.29 579.1H314.55v-60.26H788.8V348.77h75.49V802.6z" fill="currentColor" p-id="14250"></path>
-  <path d="M634.53 267.95L523.19 379.29v-67.45h-63.58V486.51h174.64v-63.58h-66.26l110.76-110.76-44.22-44.22zM523.19 422.93v-1.14l1.14 1.14h-1.14z" fill="currentColor" p-id="14251"></path>
-</svg>

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,

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',
+  },
+}

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
 

src/views/axios/index.scss

@@ -0,0 +1,3 @@
+.axios-header__btn {
+  height: 64px;
+}

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 (
+      <NLayout>
+        <NLayoutHeader bordered>
+          <NCard title="请求函数">
+            基于 axios 封装, 能够自动取消连续请求, 避免重复渲染造成问题.
+            可在该示例中测试, 并且打开控制台的网络选项卡查看
+          </NCard>
+        </NLayoutHeader>
+        <NLayoutHeader bordered>
+          <NSpace
+            class="axios-header__btn"
+            align="center"
+            justify="space-between"
+          >
+            <NInput
+              v-model:value={this.inputCityValue}
+              onInput={this.handleInputCityValue.bind(this)}
+              placeholder="请输入城市"
+            />
+          </NSpace>
+        </NLayoutHeader>
+        <NLayoutContent>
+          <NDataTable data={this.weatherData} columns={this.columns} />
+        </NLayoutContent>
+      </NLayout>
+    )
+  },
+})
+
+export default Axios

src/views/echart/index.tsx

@@ -202,7 +202,7 @@ const Echart = defineComponent({
       <div class="echart">
         <NCard title="RayChart组件使用">
           在使用该组件时, 一定要注意根组件的高度初始化问题,
-          如果需要使用其余的图利, 需要自己手动去注册.
+          如果需要使用其余的图例, 需要自己手动去注册.
           该组件实现了自动跟随模板主题切换功能, 但是动态切换损耗较大,
           所以默认不启用
         </NCard>