一、創建一個http請求封裝的js文件，名字自定義：my_http.js

/*** 基礎API請求地址（常量，全大寫命名規范）* @type {string}* @constant*/
let BASE_URL = ''//通過環境來判斷基礎路徑
if (process.env.NODE_ENV === 'development') {BASE_URL="本地/局域網后端接口"
} else {BASE_URL='網上（服務器）接口'
}/*** 封裝的HTTP請求核心函數* @param {string} url - 請求的接口路徑（不需要包含基礎接口URL）* @param {Object} [data={}] - 請求參數，默認為空對象* @param {string} [method='GET'] - HTTP方法，默認GET,支持GET/POST/DELETE/PUT等* @returns {Promise} - 返回Promise便于鏈式調用* */
export default function http(url, data = {}, method = 'GET') {// 返回一個Promise對象，支持外部鏈式調用return new Promise((resolve, reject) => {// 調用uni-app的底層請求APIuni.request({// 拼接完整請求地址（基礎接口URL +  請求的接口路徑）url: BASE_URL + url,// 請求參數（GET請求時會自動轉為query string）data: data,// 請求方法（轉換為大寫保證兼容性）method: method.toUpperCase(),// 請求頭配置header: {// 從本地存儲獲取token，沒有就位空'token': uni.getStorageSync('token') || '',// 默認JSON格式'Content-Type': 'application/json'},// 請求成功回調（注意：只要收到服務器響應就會觸發，無論HTTP狀態碼）success: (res) => {/* HTTP層狀態碼處理（4xx/5xx等也會進入success回調） */if (res.statusCode !== 200) {const errMsg = `[${res.statusCode}]${res.errMsg || '請求失敗'}`showErrorToast(errMsg)// 使用Error對象傳遞更多錯誤信息reject(errMsg)}/* 業務層狀態碼處理（假設1表示成功） */if (res.data.code === 1) {// 提取業務數據（約定data字段為有效載荷）resolve(res.data.data)} else {// 業務錯誤處理const errMsg = res.data.msg || `業務錯誤[${res.data.code}]`showErrorToast(errMsg)reject(res.data.msg)}},// 請求失敗回調（網絡錯誤、超時等）fail: (err) => {const errMsg = `網絡連接失敗: ${err.errMsg || '未知錯誤'}`showErrorToast(errMsg)reject(new Error(errMsg))},})})
}/*** 顯示統一格式的錯誤提示（私有工具方法）* @param {string} message - 需要顯示的錯誤信息* @private*/
function showErrorToast(message) {uni.showToast({title: message, // 提示內容icon: 'none', // 不顯示圖標duration: 3000 // 3秒后自動關閉})
}

二、在創建一個調用具體http請求接口的js文件，名字自定義：my_api.js

// 引入公共的請求封裝my_http.js（根據你自己實際的路徑引入）
import http from './my_http.js'// 獲取bannner列表【無參數】
export const getBannerList = () => {return http('/banner/list')
}// 登錄【url接口鏈接 ? 參數1=參數值1 & 參數2=參數值2】
export const login = (uname, upwd) => {return http('/login', {uname: uname,upwd: upwd})
}

三、調用http請求接口獲取數據

<script setup>//引入系統要用到的方法import {ref,reactive} from 'vue'import { onLoad } from '@dcloudio/uni-app'// 1、引入定義的接口方法（根據自己的實際路徑獲取）import { getTypeList } from '../../api/my_api'//2、定義輪播圖列表const bannerList = ref([])// 生命周期，進來就加載onLoad(() => {//3、調用定義的方法接口，獲取banner結果列表getBannerList().then(res => {//4、將獲取的值賦值給輪播圖數組變量bannerList.value = res})})</script>