一、创建一个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>
