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.js let 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.js export 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请求体系,满足各种业务场景需求