模板请求处理

src/api/base-service.ts

@@ -12,19 +12,23 @@ import axios from 'axios' //引入 axios库
 import qs from 'qs' //引入 node中自带的qs模块（数据格式转换）
 /* 2.全局默认配置 */
 let baseURL
-let process: any
+let process: any = {
+  env: {
+    NODE_ENV: 'development'
+  }
+}
 // 判断开发环境（一般用于本地代理）
 if (process.env.NODE_ENV === 'development') {
   // 开发环境
-  baseURL = 'http://www.liulongbin.top:3006' // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理
+  baseURL = 'https://api.vvhan.com/' // 你设置的本地代理请求（跨域代理），下文会详细介绍怎么进行跨域代理
 } else {
   // 编译环境
   if (process.env.type === 'test') {
     // 测试环境
-    baseURL = 'http://www.liulongbin.top:3006'
+    baseURL = 'https://api.vvhan.com/'
   } else {
     // 正式环境
-    baseURL = 'http://www.liulongbin.top:3006'
+    baseURL = 'https://api.vvhan.com/'
   }
 }
 // 配置axios的属性
@@ -63,6 +67,7 @@ Axios.interceptors.request.use(
     return Promise.reject(error)
   }
 )
+
 Axios.interceptors.response.use(
   (res) => {
     //请求响应后拦截

src/services/home.ts

@@ -1,47 +1,31 @@
-/*
- * @Description: {{ByRuin}}
- * @Version: 2.0
- * @Author: Ruin 🍭
- * @Date: 2022-01-25 17:42:57
- * @LastEditors: 刘引
- * @LastEditTime: 2022-01-25 18:04:29
- */
-
-import Axios from "../api/base-service"; // 导入配置好的axios文件
+import Axios from '@/api/base-service' // 导入配置好的axios文件
 // 封装axios请求函数，并用export导出
-export function getInfo(datas: unknown) {
+// get请求
+const getInfo = (params: unknown) => {
   return Axios({
-    url: "/api.php?key=free&appid=0&msg=鹅鹅鹅",
-    method: "GET",
+    url: '/api/horoscope',
+    method: 'get',
     headers: {
-      "content-type": "application/json",
+      'Content-Type': 'application/x-www-form-urlencoded' //设置请求头请求格式form
     },
-    data: datas,
-  });
+    params
+  })
 }
-export function getInfoA(datas: unknown) {
+
+// post请求
+const getItem = (data: unknown) => {
   return Axios({
-    url: "/api/getbooks",
-    method: "get",
+    url: '/api/getItem',
+    method: 'post',
     headers: {
-      "Content-Type": "application/x-www-form-urlencoded", //设置请求头请求格式form
+      'Content-Type': 'application/json' //设置请求头请求格式为json
     },
-    data: datas,
-  });
+    data
+  })
 }
-export function getItem(datas: unknown) {
-  return Axios({
-    url: "/api/getItem",
-    method: "post",
-    headers: {
-      "Content-Type": "application/json", //设置请求头请求格式为json
-    },
-    data: datas,
-  });
-}
-export function getItemInfo(datas: unknown) {
-  return Axios({
-    url: "/api/getItemInfo" + datas,
-    method: "get",
-  });
+
+const HomeApi = {
+  getInfo,
+  getItem
 }
+export default HomeApi

src/utils/other.ts

@@ -1,13 +0,0 @@
-/*
- * @Description: {{ByRuin}}
- * @Version: 2.0
- * @Author: Ruin 🍭
- * @Date: 2022-01-25 17:45:05
- * @LastEditors: 刘引
- * @LastEditTime: 2022-01-25 17:47:27
- */
-import axios from "axios";
-const otherApi = axios.create({
-  baseURL: "http://baidu.com",
-});
-export default otherApi;

src/utils/request/request.ts

@@ -1,13 +0,0 @@
-/*
- * @Description: {{ByRuin}}
- * @Version: 2.0
- * @Author: Ruin 🍭
- * @Date: 2022-01-25 17:36:26
- * @LastEditors: 刘引
- * @LastEditTime: 2022-01-25 17:46:39
- */
-import axios from 'axios'
-const homeApi = axios.create({
-  baseURL: 'http://baidu.com'
-})
-export default homeApi

src/views/home/index.vue

@@ -1,11 +1,3 @@
-<!--
- * @Description: {{ByRuin}}
- * @Version: 2.0
- * @Author: Ruin 🍭
- * @Date: 2022-03-10 10:11:06
- * @LastEditors: 刘引
- * @LastEditTime: 2022-07-26 14:42:06
--->
 <template>
   <div class="root-home">
     <p>我是home组件</p>
@@ -14,9 +6,33 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, watch, onUpdated, ref, reactive } from 'vue';
+import { computed, watch, onUpdated, ref, reactive, onBeforeMount } from 'vue'
 import news from './components/news.vue'
+import HomeApi from '@/services/home'
+
+// get请求
+const getDataFromApi = async () => {
+  try {
+    const res = await HomeApi.getInfo({ type: 'scorpio', time: 'today' })
+    console.debug(res, '获取到的数据')
+  } catch (error) {
+    console.error('get获取星座数据报错', error)
+  }
+}
+
+// post请求
+const postDataFromApi = async () => {
+  try {
+  } catch (error) {
+    console.error('post获取数据报错', error)
+  }
+}
+
+// dom加载前调用
+onBeforeMount(() => {
+  // getDataFromApi()
+  // postDataFromApi()
+})
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/index.vue

@@ -1,12 +1,15 @@
 <template>
   <Head></Head>
   <div>根组件{{ store.count }}</div>
+  <home></home>
   <Foot></Foot>
 </template>
 
 <script setup lang="ts">
 import { reactive, onMounted, watch } from 'vue'
 import { useMain } from '@/store'
+import home from '@/views/home/index.vue'
+
 const store = useMain()
 </script>