uniapp系统学习，从入门到实战（七）——网络请求与数据交互

全篇大概 3600 字(含代码)，建议阅读时间 25min

---

📚 目录 使用uni.request发起请求封装全局请求工具破解跨域难题总结

---

在跨平台应用开发中，网络请求是连接前端与后端服务的核心环节。UniApp 提供了 uni.request 方法处理网络请求，但在实际项目中，我们还需要处理全局封装、错误处理和跨域等实际问题。本文将带您全面掌握 UniApp 网络请求的实战技巧。

1、使用 uni.request 发起请求 1.1 基本用法

uni.request 是 UniApp 的核心 API，支持所有主流平台。 基础用法如下：

// 发起 GET 请求 uni.request({ url: '接口', method: 'GET', success: (res) => { console.log('响应数据:', res.data); }, fail: (err) => { console.error('请求失败:', err); } }); // 发起 POST 请求 uni.request({ url: '接口', method: 'POST', data: { name: 'John', age: 25 }, header: { 'Content-Type': 'application/json' }, success: (res) => { console.log('提交成功:', res.data); } }); 1.2 实战示例：获取天气数据 function getWeather(city) { uni.request({ url: '接口', data: { city: city }, success: (res) => { if (res.statusCode === 200) { console.log('当前温度:', res.data.temperature); } else { uni.showToast({ title: '数据获取失败', icon: 'none' }); } }, fail: () => { uni.showToast({ title: '网络连接失败', icon: 'none' }); } }); } 2. 封装全局请求工具 2.1 为什么要封装？ 统一处理错误和加载状态集中管理请求头（如 Token）简化业务代码调用 2.2 完整封装方案

创建 utils/http.js：

class HttpRequest { constructor() { this.baseUrl = '接口'; this.timeout = 10000; } request(config) { return new Promise((resolve, reject) => { // 请求拦截 const fullUrl = this.baseUrl + config.url; const header = this.getHeaders(config.headers); uni.request({ url: fullUrl, method: config.method || 'GET', data: config.data, header: header, timeout: this.timeout, success: (res) => { // 响应拦截 if (res.statusCode === 200) { resolve(res.data); } else { this.handleError(res); reject(res); } }, fail: (err) => { this.handleError(err); reject(err); } }); }); } getHeaders(customHeaders) { const headers = { 'Content-Type': 'application/json', 'X-Client-Type': 'uniapp' }; // 添加认证 Token const token = uni.getStorageSync('authToken'); if (token) headers.Authorization = `Bearer ${token}`; return { ...headers, ...customHeaders }; } handleError(error) { const status = error.statusCode; let message = '请求失败'; if (status === 401) { message = '登录已过期'; uni.navigateTo({ url: '/pages/login/login' }); } else if (status >= 500) { message = '服务器异常，请稍后再试'; } uni.showToast({ title: message, icon: 'none' }); } get(url, params) { return this.request({ method: 'GET', url, data: params }); } post(url, data) { return this.request({ method: 'POST', url, data }); } } export default new HttpRequest(); 2.3 使用示例 import http from '@/utils/http'; // 获取用户信息 async function fetchUser() { try { const user = await http.get('/user/profile'); console.log('用户数据:', user); } catch (e) { console.error('请求异常:', e); } } // 提交表单 async function submitForm(data) { await http.post('/form/submit', data); uni.showToast({ title: '提交成功' }); } 3. 破解跨域难题 3.1 跨域原理

浏览器安全策略限制不同源（协议+域名+端口）的请求，主要影响H5端，小程序/App端无此限制。

3.2 解决方案对比 方案适用环境优点缺点开发代理本地开发无需后端配合仅限开发环境CORS生产环境标准解决方案需要后端配置JSONP简单请求兼容旧浏览器仅支持GETNginx代理生产环境前端无需修改需服务器配置 3.3 实战配置指南

方案一：开发环境代理（HBuilderX） 配置 manifest.json：

{ "h5": { "devServer": { "proxy": { "/api": { "target": "接口", "changeOrigin": true, "pathRewrite": {"^/api": ""} } } } } }

方案二：生产环境CORS Node.js 示例：

// Express 中间件 app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); next(); });

方案三：Nginx反向代理

server { listen 80; server_name 域名; location /api/ { proxy_pass 接口; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } 4. 总结

分层架构：通过封装实现业务逻辑与网络层的解耦

异常处理：统一处理401等状态码，增强用户体验

安全策略：HTTPS请求、Token刷新机制、请求签名

性能优化：合理设置超时时间（建议10-30秒），重要请求增加重试机制，大数据量使用分页加载

// 示例：请求重试机制 async function fetchWithRetry(url, retries = 3) { for (let i = 0; i < retries; i++) { try { return await http.get(url); } catch (err) { if (i === retries - 1) throw err; await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1))); } } }

通过合理封装和正确配置，可以在UniApp中构建稳定高效的网络请求体系。建议根据实际项目需求调整封装方案，并做好各平台的兼容性测试。