feat: 优化请求

src/pages.json

@@ -65,7 +65,7 @@
       "type": "page",
       "layout": "demo",
       "style": {
-        "navigationBarTitleText": "请求"
+        "navigationBarTitleText": "请求-状态一体化"
       }
     },
     {
@@ -81,7 +81,7 @@
       "type": "page",
       "layout": "default",
       "style": {
-        "navigationBarTitleText": "上传"
+        "navigationBarTitleText": "上传-状态一体化"
       }
     }
   ],

src/pages/index/request2.vue

@@ -2,7 +2,7 @@
 {
   layout: 'demo',
   style: {
-    navigationBarTitleText: '请求',
+    navigationBarTitleText: '请求-状态一体化',
   },
 }
 </route>
@@ -20,8 +20,14 @@
 
 <script lang="ts" setup>
 import { getFooAPI, IFooItem } from '@/service/index/foo'
+import { httpGet } from '@/utils/http'
 
-const { loading, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), { immediate: true })
+// 适合少部分全局性的接口————多个页面都需要的请求接口，额外编写一个 Service 层
+// const { loading, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), { immediate: true })
+// 再次简化，一行代码搞定，方便一次性的请求，适用大部分请求
+const { loading, data, run } = useRequest<IFooItem>(() => httpGet('/foo', { name: '菲鸽' }), {
+  immediate: true,
+})
 
 const getFoo = () => run()
 const reset = () => {

src/pages/index/upload2.vue

@@ -2,7 +2,7 @@
 {
   layout: 'default',
   style: {
-    navigationBarTitleText: '上传',
+    navigationBarTitleText: '上传-状态一体化',
   },
 }
 </route>

src/utils/http.ts

@@ -41,42 +41,36 @@ export const http = <T>(options: CustomRequestOptions) => {
     })
   })
 }
+/**
+ * GET 请求
+ * @param url 后台地址
+ * @param query 请求query参数
+ * @returns
+ */
+export const httpGet = <T>(url: string, query?: Record<string, any>) => {
+  return http<T>({
+    url,
+    query,
+    method: 'GET',
+  })
+}
 
-// uni.uploadFile封装
+/**
-export const uniFileUpload = <T>(options: CustomRequestOptions) => {
+ * POST 请求
-  // 1. 返回 Promise 对象
+ * @param url 后台地址
-  return new Promise<IResData<T>>((resolve, reject) => {
+ * @param data 请求body参数
-    uni.uploadFile({
+ * @param query 请求query参数，post请求也支持query，很多微信接口都需要
-      ...options,
+ * @returns
-      // 响应成功
+ */
-      success(res) {
+export const httpPost = <T>(
-        // 状态码 2xx，参考 axios 的设计
+  url: string,
-        if (res.statusCode >= 200 && res.statusCode < 300) {
+  data?: Record<string, any>,
-          // 文件上传接口的rea.data的类型为string，这里转一下
+  query?: Record<string, any>,
-          const resData = JSON.parse(res.data) as IResData<T>
+) => {
-          resolve(resData)
+  return http<T>({
-        } else if (res.statusCode === 401) {
+    url,
-          // 401错误  -> 清理用户信息，跳转到登录页
+    query,
-          // userStore.clearUserInfo()
+    data,
-          // uni.navigateTo({ url: '/pages/login/login' })
+    method: 'POST',
-          reject(res)
-        } else {
-          // 其他错误 -> 根据后端错误信息轻提示
-          uni.showToast({
-            icon: 'none',
-            title: '文件上传错误',
-          })
-          reject(res)
-        }
-      },
-      // 响应失败
-      fail(err) {
-        uni.showToast({
-          icon: 'none',
-          title: '网络错误，换个网络试试',
-        })
-        reject(err)
-      },
-    })
   })
 }