在 uni-app 开发中，网络请求是连接前端与后端的核心桥梁。一个设计良好的请求工具能够显著提升开发效率，减少重复代码。本文将分享一个精简版的 uni-app 网络请求工具实现，它保留了核心功能同时保持了足够的灵活性。

设计思路

一个优秀的网络请求工具应当具备以下特点：

• 配置集中管理，便于维护
• 支持常用的 GET 和 POST 请求
• 自动处理基础 URL 拼接
• 统一的加载状态管理
• 简洁的错误处理机制
• 可扩展性强

基于以上原则，我们实现了一个轻量级但功能完备的网络请求工具。

实现代码解析

基础配置

首先，我们定义了请求的基础配置，包括基础 URL、请求头、超时设置等：

config: {baseURL: setting.IS_DEV ? setting.DEV_URL : setting.PRO_URL,header: {'Content-Type': 'application/json;charset=UTF-8'},dataType: "json",responseType: "text",// 条件编译，针对不同平台设置超时// #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXINtimeout: setting.TIMEOUT,// #endif// 其他平台特定配置...
}

这里使用了 uni-app 的条件编译特性，为不同平台设置了合适的参数，体现了跨平台开发的特点。

加载状态管理

为了提供良好的用户体验，我们实现了加载状态的自动管理：

/*** 显示无文字的转圈加载动画*/
showLoading() {uni.showLoading({title: '', // 空文字，仅显示图标mask: true, // 透明蒙层防止操作穿透icon: 'loading'});
},/*** 隐藏加载动画*/
hideLoading() {uni.hideLoading();
},

这种设计可以避免在每个请求前后手动调用加载动画，减少了重复代码。

请求方法封装

我们分别封装了 GET 和 POST 方法，让 API 调用更加直观：

/*** 发送GET请求* @param {string} url - 请求地址* @param {object} data - 请求参数* @param {object} options - 额外配置项* @returns {Promise}*/
get(url, data, options) {return this.request({...options,url,data,method: 'GET'});
},/*** 发送POST请求* @param {string} url - 请求地址* @param {object} data - 请求参数* @param {object} options - 额外配置项* @returns {Promise}*/
post(url, data, options) {return this.request({...options,url,data,method: 'POST',header: {...options?.header,'Content-Type': 'application/x-www-form-urlencoded'}});
},

POST 方法特别设置了适合表单提交的 Content-Type，同时保留了配置项的灵活性。

核心请求逻辑

request 方法是整个工具的核心，负责处理实际的网络请求：

request(options) {// 合并配置const config = {...this.config,...options};config.header = {...this.config.header,...options.header};// 处理请求URLconfig.url = config.baseURL + config.url;// 添加tokenconst token = uni.getStorageSync('token') || '';if (token) {config.header.Authorization = `Bearer ${token}`;}this.showLoading();return new Promise((resolve, reject) => {uni.request(config).then(([err, res]) => {this.hideLoading();if (err) {return reject(err);}// 检查返回数据中的code值if (res.data && res.data.code !== 200) {const error = new Error(`请求错误，错误码: ${res.data.code}`);error.code = res.data.code;error.response = res;return reject(error);}resolve(res);}).catch(error => {this.hideLoading(); reject(error);});});
}

这段代码实现了几个关键功能：

1. 配置合并，允许全局配置与单次请求配置结合
2. URL 自动拼接，无需在每次请求时手动拼接基础 URL
3. Token 自动附加，简化身份验证流程
4. 统一的错误处理，当返回 code 不等于 200 时视为失败
5. 自动管理加载状态，请求开始时显示，结束时隐藏

使用示例

使用这个工具非常简单，只需导入后直接调用即可：

import request from '@/utils/request.js';// 发送GET请求
async function fetchData() {try {const res = await request.get('/api/data', { id: 1 });console.log('数据获取成功', res.data);} catch (error) {console.error('数据获取失败', error);}
}// 发送POST请求
async function submitForm(formData) {try {const res = await request.post('/api/submit', formData);console.log('提交成功', res.data);} catch (error) {console.error('提交失败', error);}
}

总结

本文介绍了一个精简版的 uni-app 网络请求工具，它具有以下特点：

1. 简洁高效：保留核心功能，去除冗余代码，让请求逻辑更加清晰
2. 易用性强：封装了 GET 和 POST 方法，API 设计直观，降低使用门槛
3. 统一管理：集中处理 URL 拼接、加载状态、Token 附加等共性逻辑
4. 错误处理：当返回 code 不等于 200 时统一视为失败，简化错误处理流程
5. 跨平台兼容：利用 uni-app 的条件编译特性，适配不同平台的特性

这个工具可以作为项目的基础网络层，根据实际需求进行扩展。例如，可以添加请求拦截器、响应拦截器、错误重试等功能，使其更加强大。

通过封装网络请求，我们可以在项目中实现代码复用，减少重复劳动，同时也便于后期维护和功能扩展。这种设计思想不仅适用于 uni-app，也可以应用于其他前端框架的网络请求处理中。