feat: add axios for http request

Author: kevin

package-lock.json

@@ -10,6 +10,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "axios": "^0.26.1",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14"
   },

package.json

@@ -0,0 +1,9 @@
+import service from './service'
+
+export const get = (url, params) => {
+  return service.requese({ url: url, params: params, method: 'GET' })
+}
+
+export const post = (url, data) => {
+  return service.request({ url: url, data: data, method: 'POST' })
+}

src/api/manager.js

@@ -0,0 +1,34 @@
+import axios from 'axios'
+
+const baseURL = import.meta.env.VITE_API_BASE_URL
+
+const service = axios.create({
+  baseURL: baseURL,
+  timeout: 10 * 60 * 1000
+})
+
+service.interceptors.request.use(
+  (config) => {
+    // 在请求之前配置header
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+service.interceptors.response.use(
+  (response) => {
+    const { status, statusText, data } = response
+    if (status === 200) {
+      return data
+    } else {
+      return Promise.reject(statusText)
+    }
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/api/service.js

@@ -0,0 +1,4 @@
+import { post, get } from './manager'
+
+export const info = (params) => get('/user/info', params)
+export const login = (data) => post('/user/login', data)

src/api/user.js

@@ -3,9 +3,19 @@
 </template>
 
 <script>
+import { ref, onBeforeMount } from 'vue'
+import { info } from '../api/user'
+
 export default {
   setup() {
-    return {}
+    const userInfo = ref(null)
+    onBeforeMount(async () => {
+      const res = await info({ id: 1 })
+      userInfo.value = res
+    })
+    return {
+      userInfo
+    }
   }
 }
 </script>