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

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

---

📚 目录

1. 使用uni.request发起请求
2. 封装全局请求工具
3. 破解跨域难题
4. 总结

---

在跨平台应用开发中，网络请求是连接前端与后端服务的核心环节。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'};// 添加认证 Tokenconst 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	简单请求	兼容旧浏览器	仅支持GET
Nginx代理	生产环境	前端无需修改	需服务器配置

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中构建稳定高效的网络请求体系。建议根据实际项目需求调整封装方案，并做好各平台的兼容性测试。