uni.request 请求拦截

src/api/http.js

@@ -0,0 +1,47 @@
+import {useUserStore} from "../stores/modules/user";
+
+const baseURL = "https://www.httpbin.org"
+
+const httpInterceptor = {
+    invoke(options){
+        // 正则检查是否为http/https开头的url, 如果不是则加上baseURL
+        if(!options.url.match(/^https?:\/\//)){
+            options.url = baseURL + options.url
+        }
+
+        // 设置超时时间 10 秒
+        options.timeout = 10 * 1000
+
+        // 设置请求头
+        options.header = {
+            ...options.header,
+            "source-client": "mp-app"
+        }
+
+        const userStore = useUserStore()
+        const token = userStore.userInfo?.token
+        if(token){
+            options.header.Authorization = token
+            options.header.token = token
+        }
+    },
+    fail(err){
+        console.error("请求失败", err)
+    },
+    returnValue(results) {
+        return new Promise((resolve, reject)=>{
+            results.then(resp=>{
+                console.log("请求结果", resp)
+                if(resp.statusCode >= 400){
+                    console.error("请求失败", resp)
+                    reject(resp)
+                } else {
+                    resolve(resp)
+                }
+            })
+        })
+    }
+}
+
+uni.addInterceptor("request", httpInterceptor)
+uni.addInterceptor("uploadFile", httpInterceptor)

src/main.js

@@ -1,5 +1,5 @@
 import App from './App'
-
+import "./api/http"
 import pinia from './stores'
 
 // #ifndef VUE3

src/pages/index/index.vue

@@ -41,12 +41,14 @@
     <view>
       <text class="title">{{ now }}</text>
     </view>
+    <view>
+      <text class="title">{{ request.ip }}</text>
+    </view>
   </view>
 </template>
 
 <script>
 import moment from 'moment'
-import {useUserStore} from "../../stores/modules/user";
 import CategoryItem from "./components/category-item/index.vue";
 let timer = null
 export default {
@@ -74,8 +76,14 @@ export default {
       },
       search: {
         keyword: ""
+      },
+      request: {
+        ip: ""
       }
     }
+  },
+  onLoad() {
+
   },
   mounted() {
     let capsule = uni.getMenuButtonBoundingClientRect(); // 小程序右上角胶囊信息
@@ -91,8 +99,6 @@ export default {
     timer = setInterval(() => {
       this.now = new moment().format('YYYY-MM-DD HH:mm:ss')
     }, 1000)
-
-    useUserStore().userInfo.name = "法外狂徒"
   },
   methods: {
     previewImage(item) {

src/pages/test-page/test-page.vue

@@ -29,12 +29,49 @@
     <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
   </uni-card>
 
+  <view>
+    <text>
+      {{useUserStore().userInfo}}
+    </text>
+  </view>
+
+  <view>
+    <text>
+      {{ctx.request.ip}}
+    </text>
+  </view>
+
   <button @tap="back">返回上一页</button>
+  <button @tap="mockRequest">模拟请求</button>
+  <button type="primary" @tap="mockLogin">模拟登录</button>
   <button type="warn" @tap="cleanStorage">清空本地存储</button>
 </template>
 
 <script setup>
 import {useUserStore} from "../../stores/modules/user";
+import {reactive} from "vue";
+const ctx = reactive({
+  request: {
+    ip: ''
+  }
+})
+
+
+function mockRequest(){
+  uni.request({
+    url: "/anything"
+  }).then(resp=>{
+    console.log(resp)
+
+    ctx.request.ip = resp.data.origin
+  })
+
+  uni.request({
+    url: "/status/400"
+  }).then(resp=>{
+    console.log(resp)
+  })
+}
 
 function back() {
   uni.navigateBack({
@@ -46,6 +83,13 @@ function cleanStorage(){
   useUserStore().clearUserInfo()
   uni.clearStorage()
 }
+
+function mockLogin(){
+  const userInfo = useUserStore().userInfo
+  userInfo.id = "1"
+  userInfo.name = "法外狂徒"
+  userInfo.token = 'xxxxxx'
+}
 </script>
 
 

src/stores/modules/user.js

@@ -5,11 +5,13 @@ export const useUserStore = defineStore('user', () =>{
     const userInfo = reactive({
         id: "",
         name: "",
+        token: "",
     })
 
     function clearUserInfo() {
         userInfo.id = ""
         userInfo.name = ""
+        userInfo.token = ""
     }
 
     return {