feat: 请求拦截

.eslintrc.cjs

@@ -75,5 +75,6 @@ module.exports = {
   },
   globals: {
     uni: true,
+    UniApp: true,
   },
 }

src/pages/index/index.vue

@@ -6,6 +6,8 @@
     </view>
     <button @click="setUserInfo">设置UserInfo</button>
     <button @click="clearUserInfo">清除UserInfo</button>
+
+    <button @click="request">请求</button>
     <view class="flex justify-center items-center text-blue-500">
       Demo Count: {{ countStore.count }}
       <button class="ml-2" @click="countStore.increment">新增</button>
@@ -25,6 +27,7 @@
 <script setup lang="ts" name="TestIndex">
 import { ref } from 'vue'
 import { useCountStore, useUserStore } from '@/store'
+import { http } from '@/utils/http'
 
 const countStore = useCountStore()
 const title = ref('Hello')
@@ -40,6 +43,13 @@ const setUserInfo = () => {
 const clearUserInfo = () => {
   userStore.clearUserInfo()
 }
+const request = () => {
+  const res = http({
+    url: '/getUserList',
+    method: 'GET',
+  })
+  console.log(res)
+}
 </script>
 
 <style>

src/utils/http.ts

@@ -0,0 +1,80 @@
+/* eslint-disable no-param-reassign */
+import { useUserStore } from '@/store'
+import { UserInfo } from '@/typings'
+
+const userStore = useUserStore()
+type Data<T> = {
+  code: number
+  msg: string
+  result: T
+}
+
+// 请求基地址
+const baseURL = 'http://localhost:5565/api'
+
+// 拦截器配置
+const httpInterceptor = {
+  // 拦截前触发
+  invoke(options: UniApp.RequestOptions) {
+    // 1. 非 http 开头需拼接地址
+    if (!options.url.startsWith('http')) {
+      options.url = baseURL + options.url
+    }
+    // 2. 请求超时
+    options.timeout = 10000 // 10s
+    // 3. 添加小程序端请求头标识
+    options.header = {
+      platform: 'mp-weixin', // 可选值与 uniapp 定义的平台一致，告诉后台来源
+      ...options.header,
+    }
+    // 4. 添加 token 请求头标识
+    const { token } = userStore.userInfo as unknown as UserInfo
+    if (token) {
+      options.header.Authorization = `Bearer ${token}`
+    }
+  },
+}
+
+// 拦截 request 请求
+uni.addInterceptor('request', httpInterceptor)
+// 拦截 uploadFile 文件上传
+uni.addInterceptor('uploadFile', httpInterceptor)
+
+export const http = <T>(options: UniApp.RequestOptions) => {
+  // 1. 返回 Promise 对象
+  return new Promise<Data<T>>((resolve, reject) => {
+    uni.request({
+      ...options,
+      // 响应成功
+      success(res) {
+        // 状态码 2xx，参考 axios 的设计
+        if (res.statusCode >= 200 && res.statusCode < 300) {
+          // 2.1 提取核心数据 res.data
+          resolve(res.data as Data<T>)
+        } else if (res.statusCode === 401) {
+          // 401错误  -> 清理用户信息，跳转到登录页
+          userStore.clearUserInfo()
+          uni.navigateTo({ url: '/pages/login/login' })
+          reject(res)
+        } else {
+          // 其他错误 -> 根据后端错误信息轻提示
+          uni.showToast({
+            icon: 'none',
+            title: (res.data as Data<T>).msg || '请求错误',
+          })
+          reject(res)
+        }
+      },
+      // 响应失败
+      fail(err) {
+        uni.showToast({
+          icon: 'none',
+          title: '网络错误，换个网络试试',
+        })
+        reject(err)
+      },
+    })
+  })
+}
+
+export default http