在UniApp中，結合Vue 3的強大特性，進行網絡請求的封裝是項目中常見的需求。這樣的封裝不僅提高了代碼的可維護性，還使得在組件中使用網絡請求更加簡潔。本文將詳細介紹UniApp Vue 3中的網絡請求封裝，并提供一個簡單的用法示例。

1. 網絡請求封裝

首先，我們創建一個網絡請求的封裝模塊，通常包括以下幾個部分：

1.1 基礎配置

// request.jslet baseUrl = "";
const env = "dev";if (env === "dev") {baseUrl = 'http://192.168.0.108:8001';
} else if (env === "pro") {baseUrl = 'http://192.168.0.108:8001';
}

上述代碼設置了請求的基礎URL，根據不同的環境（開發或生產）設置不同的地址。

1.2 請求方法封裝

// request.jsconst request = (url, method = 'GET', data = {}, header = {}) => {return new Promise((resolve, reject) => {header["Authorization"] = uni.getStorageSync("token");uni.request({url: baseUrl + url,method: method,data: data,header: header,success: (res) => {if (res.data.code == 401) {uni.reLaunch({url: "/pages/login/login"})}resolve(res.data)},fail: (err) => {let result = { code: 500, msg: "獲取數據失敗" };reject(result)}})})
}

這里定義了一個通用的請求方法 request，接受URL、請求方法、請求數據和請求頭等參數，返回一個Promise對象。在請求成功時，會判斷返回的狀態碼，如果是401，則重新跳轉到登錄頁；否則，將返回的數據通過resolve傳遞出去。請求失敗時，通過reject返回一個包含錯誤信息的對象。

1.3 不同請求方式的封裝

// request.jsconst form = (url, param) => {return request(url, "post", param, { 'Content-Type': 'application/x-www-form-urlencoded' })
}const post = (url, param) => {return request(url, "post", param, { 'Content-Type': 'application/json' })
}

1.4 數據加載方法封裝

// request.jsconst loadPostData = (url, param, ref) => {let res = post(url, param);res.then((res) => {if (res.code !== 200) {return;}ref.value = res.data || [];}).catch((err) => {console.log(err);})
}const loadFormData = (url, param, ref) => {let res = form(url, param);res.then((res) => {if (res.code !== 200) {return;}ref.value = res.data || [];}).catch((err) => {console.log(err);})
}

這兩個方法封裝了不同場景下的數據加載，根據請求方式調用相應的post或form方法，然后根據返回的數據進行相應的處理。

1.5 回調方式封裝

// request.jsconst loadPostCallback = (url, param, callback) => {let res = post(url, param);res.then((res) => {if (res.code !== 200) {return;}let data = res.data || [];if (callback) {callback(data);}}).catch((err) => {console.log(err);})
}

這個方法在數據加載成功后執行回調函數，適用于需要在數據加載完成后執行額外操作的場景。

1.6 導出模塊

// request.jsexport default { request, form, post, loadPostData, loadFormData, loadPostCallback };

最后，通過export default導出整個模塊，以便在其他文件中引用。

2. 使用封裝后的網絡請求

有了以上的封裝，我們可以在Vue組件中使用如下：

// YourComponent.vue<template><!-- Your component template -->
</template><script>
import { ref } from 'vue';
import request from '@/path-to-request-module'; // 替換為實際的路徑export default {setup() {const data = ref([])const fetchData = () => {let param = {appKey: "miniPage",fetch: "1",depth: "1"}request.loadPostData("/appMenu/list", param, data)}// 在適當的生命周期或事件中調用 fetchData// 例如：onMounted(fetchData) 或者 在某個按鈕點擊事件中調用return {data,fetchData}}
}
</script>

上述代碼中，我們引入了ref用于創建響應式變量，然后導入了我們封裝好的網絡請求模塊。在setup函數中，我們定義了一個名為data的響應式變量和一個名為fetchData的函數，用于發起網絡請求。

在fetchData函數中，我們定義了請求參數 param，然后調用request.loadPostData方法進行數據加載。這樣，我們在組件中只需關注數據的使用和業務邏輯，網絡請求的具體實現被封裝在了request模塊中。

這樣的封裝使得代碼更加清晰，降低了組件的復雜度，同時也提高了代碼的可維護性。

通過這種方式，你可以輕松地在Vue 3中進行網絡請求，并在項目中重用封裝好的請求方法。