当前位置：首页 > news >正文

打造精简高效的 uni-app 网络请求工具

news 2025/9/14 7:22:22

在 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);});});
}

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

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

使用示例

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

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);}
}