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请求体系，满足各种业务场景需求
