UniApp中的HTTP请求
1. UniApp内置HTTP请求方法
UniApp提供了uni.request作为内置的HTTP请求API，具有以下特点：
跨平台兼容：已为iOS、Android、H5等平台做了优化和适配
简单易用：API设计简洁，支持Promise风格调用
性能优越：原生实现，处理大数据量时性能表现良好
维护成本低：无需关注底层网络库更新和维护
基本使用示例：
uni.request({ url: 'https://example.com/api', method: 'GET', data: {name: 'lisa', age: 23}, header: {'Content-Type': 'application/json'}, success: (res) => console.log(res.data), fail: (err) => console.error(err)});平台差异说明：
delete请求不支持支付宝和头条小程序(HX2.6.15)
put请求不支持支付宝小程序(HX2.6.15)
2. 请求封装最佳实践(2025版)
2025年推荐的请求封装方式：
// my_http.jslet BASE_URL = '';if(process.env.NODE_ENV === 'development') { BASE_URL = "本地/局域网后端接口"} else { BASE_URL = '网上(服务器)接口'}export default function http(url, data = {}, method = 'GET') { return new Promise((resolve, reject) => { uni.request({ url: BASE_URL + url, data, method, header: {'Content-Type': 'application/json'}, success: (res) => resolve(res.data), fail: (err) => reject(err) }); });}使用方式：
import http from '@/utils/my_http';// GET请求http('/user/list').then(data => console.log(data));// POST请求http('/user/create', {name: 'John'}, 'POST').then(data => console.log(data));这种封装方式提供了：
环境区分(开发/生产)
统一的请求前缀管理
Promise风格调用
简化的接口调用方式
3. Axios集成方案
虽然UniApp内置了uni.request，但开发者仍可选择使用流行的Axios库：
安装与基础配置
npm install axios@0.27.2 --save
关键配置点：
import axios from 'axios';axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';axios.defaults.adapter = config => { // 适配uni-app return new Promise((resolve, reject) => { uni.request({ ...config, success: (res) => resolve(res), fail: (err) => reject(err) }); });};const service = axios.create({ baseURL: 'http://127.0.0.1:7777/', timeout: 6000});拦截器配置
// 请求拦截service.interceptors.request.use(config => { if(config.url.indexOf("login") < 0) { config.headers['token'] = uni.getStorageSync('token'); } return config;});// 响应拦截service.interceptors.response.use(res => { if(res.status === 200 && res.data.code === 100) { uni.setStorageSync('token', res.data.token); } return res.data;});Axios优势：
支持请求和响应拦截
自动转化JSON格式
取消请求功能
防止CSRF(跨站请求伪造)
4. 跨域问题解决方案
UniApp开发中常见的跨域问题及解决方法：
App端解决方案
后端配置CORS：最直接的解决方案
代理服务器：转发请求避免跨域限制
WebView设置：允许跨域访问
微信小程序解决方案
配置域名白名单：在微信公众平台配置合法域名
开发环境临时方案：勾选"不校验合法域名"选项
通用解决方案
// vite.config.jsexport default defineConfig({ plugins: [uni()], server: { port: 5173, https: false, cors: true, // 允许跨域 proxy: { // 代理配置 '/api': { target: 'http://your-backend.com', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } }});注意：小程序和App本身没有浏览器的同源策略限制，跨域主要是H5开发时的问题
5. 错误处理与调试技巧
常见错误类型
跨域限制：检查域名白名单和CORS配置
网络权限：确认manifest.json中网络权限已开启
HTTPS配置：iOS设备对HTTPS有严格要求
证书验证：开发阶段可临时关闭证书验证
错误处理最佳实践
// 封装统一的错误处理function handleError(error) { if(error.errMsg.includes('timeout')) { uni.showToast({title: '请求超时', icon: 'none'}); } else if(error.statusCode === 401) { uni.showToast({title: '未授权', icon: 'none'}); uni.navigateTo({url: '/pages/login/login'}); } else { uni.showToast({title: '网络错误', icon: 'none'}); } console.error(error);}// 使用示例uni.request({ url: 'https://example.com/api', fail: handleError, complete: (res) => { if(res.statusCode !== 200) { handleError(res); } }});真机调试技巧
使用
uni.getSystemInfo获取设备信息辅助调试通过
uni.onNetworkStatusChange监听网络状态变化利用HBuilderX的"真机运行"功能直接调试
查看设备日志定位具体错误
6. 性能优化与高级配置
超时设置
// 全局超时设置uni.request({ url: 'https://example.com/api', timeout: 30000, // 30秒超时 // ...});// 封装中的超时配置const service = axios.create({ baseURL: 'http://your-api.com', timeout: 6000 // 6秒超时});请求取消
// 使用AbortController取消请求(仅H5)const controller = new AbortController();uni.request({ url: 'https://example.com/api', signal: controller.signal});// 取消请求controller.abort();缓存策略
// 简单缓存实现const cache = {};function cachedRequest(url) { if(cache[url]) { return Promise.resolve(cache[url]); } return uni.request({url}).then(res => { cache[url] = res.data; return res.data; });}7. uni.request vs Axios对比
选择建议：
简单项目：直接使用
uni.request复杂项目：集成Axios以获得更强大的功能
需要取消请求/拦截器：选择Axios
追求最小依赖：使用
uni.request
8. 2025年最新推荐
根据2025年的开发实践，推荐以下HTTP请求方案：
基础项目：使用官方
uni.request配合简单封装企业级项目：采用Axios+拦截器+TypeScript的完整方案
高性能要求：考虑使用
@anyup/uni-http等优化库多环境管理：通过
process.env区分开发/生产环境安全实践：强制HTTPS、请求签名、token刷新机制
通过以上方案，开发者可以在UniApp中构建健壮、高效的HTTP请求体系，满足各种业务场景需求
