feat(request): get & post 请求

env/.env

@@ -12,3 +12,5 @@ VITE_WX_APPID = 'wxa2abb91f64032a2b'
 # 参考文档如下
 # https://uniapp.dcloud.net.cn/tutorial/i18n.html#vue%E7%95%8C%E9%9D%A2%E5%92%8Cjs%E5%86%85%E5%AE%B9%E7%9A%84%E5%9B%BD%E9%99%85%E5%8C%96
 VITE_FALLBACK_LOCALE = 'zh-Hans'
+
+VITE_SERVER_BASEURL = 'https://ukw0y1.laf.run'

package.json

@@ -87,6 +87,7 @@
     "dayjs": "1.11.10",
     "pinia": "2.0.36",
     "pinia-plugin-persistedstate": "3.2.1",
+    "qs": "^6.11.2",
     "vue": "3.2.47",
     "vue-i18n": "9.9.0"
   },

src/pages/index/request.vue

@@ -0,0 +1,36 @@
+<route lang="json5">
+{
+  layout: 'demo',
+  style: {
+    navigationBarTitleText: '请求',
+  },
+}
+</route>
+
+<template>
+  <view class="mt-6">
+    <!-- http://localhost:9000/#/pages/index/request -->
+    <button @click="testRequest" class="my-4">测试 GET 请求</button>
+    <view class="text-xl">请求数据如下</view>
+    <view class="text-green h-10">{{ JSON.stringify(data) }}</view>
+    <button @click="testRequest2" class="my-4">测试 POST 请求</button>
+    <view class="text-xl">请求数据如下</view>
+    <view class="text-green h-10">{{ JSON.stringify(data2) }}</view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { getFoo, postFoo, FooItem } from '@/service/foo'
+
+const data = ref<FooItem>()
+const testRequest = async () => {
+  const res = await getFoo('菲鸽')
+  data.value = res.result
+}
+
+const data2 = ref<FooItem>()
+const testRequest2 = async () => {
+  const res = await postFoo('菲鸽2')
+  data2.value = res.result
+}
+</script>

src/service/foo.d.ts

@@ -0,0 +1,4 @@
+export type FooItem = {
+  id: string
+  name: string
+}

src/service/foo.ts

@@ -0,0 +1,23 @@
+import { http } from '@/utils/http'
+import type { FooItem } from './foo.d'
+
+export { FooItem }
+
+/** get 请求 */
+export const getFoo = (name: string) => {
+  return http<FooItem>({
+    url: `/foo`,
+    method: 'GET',
+    query: { name },
+  })
+}
+
+/** get 请求 */
+export const postFoo = (name: string) => {
+  return http<FooItem>({
+    url: `/foo`,
+    method: 'POST',
+    query: { name }, // post 请求也支持 query
+    data: { name },
+  })
+}

src/utils/http.ts

@@ -1,7 +1,10 @@
 /* eslint-disable no-param-reassign */
+import qs from 'qs'
 import { useUserStore } from '@/store'
 import { UserInfo } from '@/typings'
 
+type CustomRequestOptions = UniApp.RequestOptions & { query?: Record<string, any> }
+
 type Data<T> = {
   code: number
   msg: string
@@ -15,7 +18,19 @@ const baseURL = import.meta.env.VITE_SERVER_BASEURL
 // 拦截器配置
 const httpInterceptor = {
   // 拦截前触发
-  invoke(options: UniApp.RequestOptions) {
+  invoke(options: CustomRequestOptions) {
+    console.log(options)
+
+    // 接口请求支持通过 query 参数配置 queryString
+    if (options.query) {
+      const queryStr = qs.stringify(options.query)
+      if (options.url.includes('?')) {
+        options.url += `&${queryStr}`
+      } else {
+        options.url += `?${queryStr}`
+      }
+    }
+
     // 1. 非 http 开头需拼接地址
     if (!options.url.startsWith('http')) {
       options.url = baseURL + options.url
@@ -41,11 +56,13 @@ uni.addInterceptor('request', httpInterceptor)
 // 拦截 uploadFile 文件上传
 uni.addInterceptor('uploadFile', httpInterceptor)
 
-export const http = <T>(options: UniApp.RequestOptions) => {
+export const http = <T>(options: CustomRequestOptions) => {
   // 1. 返回 Promise 对象
   return new Promise<Data<T>>((resolve, reject) => {
     uni.request({
       ...options,
+      dataType: 'json',
+      responseType: 'json',
       // 响应成功
       success(res) {
         // 状态码 2xx，参考 axios 的设计