本文详解如何在uniapp项目中封装通用的网络请求、文件下载及上传方法。通过整合[[wp:a0]]、[[wp:a1]]和[[wp:a2]]接口，在[[wp:a4]]中统一处理参数合并、域名拼接及[[wp:a5]]异常捕获，并提供完整的Vue模板与脚本示例，实现一键调用通用HTTP交互功能。
原理分析
核心逻辑依赖于uni.request执行标准数据请求，利用uni.downloadFile处理文件下载任务，并通过uni.uploadFile完成文件上传操作。
相关封装代码统一存放于项目根目录的scripts文件夹内，具体文件名为http.js。
方法实现
下文将逐步解析数据请求、文件下载以及文件上传这三个核心功能的封装细节。
数据请求
该函数接收外部传入的参数，将其与预设的默认配置进行合并，随后调用请求API。获取响应后，使用try...catch结构来统一处理成功或失败的逻辑分支。
代码中引入了域名配置、地址前缀及通用工具函数，此处为简洁起见省略具体引入代码。开发者可自行查找公共接口或基于Node.js搭建简易服务器进行调试。
// 网络请求
async function request(options) {
let isHttp = options.url.indexOf("http") > -1;
let url = isHttp ? options.url : `${urls.baseUrl}${options.url}`;
let defultOptions = {
url,
method: options.method || "get",
data: options.data || null,
timeout: options.timeout || 30000,
dataType: options.dataType || "json",
header: options.header || {
"Content-Type": "application/json",
},
sslVerify: options.sslVerify || false,
};
let params = { ...options, ...defultOptions };
console.log("请求参数：", params);
try {
let result = await uni.request(params);
if (result.statusCode === 200) {
return result.data;
} else {
return {
code: 102,
msg: "get_fail",
data: {
info: result.errMsg,
},
};
}
return result;
} catch (e) {
return {
code: 101,
msg: "get_fail",
data: {
info: e,
},
};
}
}文件下载
下载功能的实现逻辑与请求类似，主要区别在于调用的API不同，具体实现见下方代码。
// 下载文件
async function download(options) {
let isHttp = options.url.indexOf("http") > -1;
let url = isHttp ? options.url : `${urls.baseUrl}${options.url}`;
let defultOptions = {
url,
timeout: options.timeout || 30000,
header: options.header || {},
filePath: options.filePath,
};
let params = { ...options, ...defultOptions };
console.log("下载参数：", params);
try {
let result = await uni.downloadFile(params);
if (result.statusCode === 200) {
return result.tempFilePath;
} else {
return {
code: 102,
msg: "download_fail",
data: {
info: result.errMsg,
},
};
}
return result;
} catch (e) {
return {
code: 101,
msg: "download_fail",
data: {
info: e,
},
};
}
}文件上传
上传功能的封装方式与前述方法保持一致，此处仅做简要封装处理。
// 上传文件
async function upload(options) {
let isHttp = options.url.indexOf("http") > -1;
let url = isHttp ? options.url : `${urls.baseUrl}${options.url}`;
let defultOptions = {
url,
timeout: options.timeout || 30000,
filePath: options.filePath || "",
name: options.name || "file",
};
let params = { ...options, ...defultOptions };
console.log("上传参数：", params);
try {
let result = await uni.uploadFile(params);
if (result.statusCode === 200) {
return JSON.parse(result.data);
} else {
return {
code: 102,
msg: "upload_fail",
data: {
info: result.errMsg,
},
};
}
return result;
} catch (e) {
//TODO handle the exception
return {
code: 101,
msg: "upload_fail",
data: {
info: e,
},
};
}
}完成上述函数定义后，务必在文件末尾正确导出这些方法，以便其他模块调用。
实战演练
模板内容
- 请求功能对应的UI模板如下。
<view class="list-http">
<button @click="sendReq">发起请求</button>
<text class="list-http-txt">响应内容：{{ httpInfo.request }}</text>
</view>- 下载功能对应的UI模板如下。
<!-- 下载图片 -->
<view class="list-http">
<button @click="downloadImg">下载图片</button>
<text class="list-http-txt">响应内容：</text>
<image class="list-http-img" :src="httpInfo.imgUrl" mode="widthFix"></image>
</view>
<!-- 下载文件 -->
<view class="list-http">
<button @click="downloadFile">下载文件</button>
<text class="list-http-txt">响应内容：{{ httpInfo.fileUrl }}</text>
</view>- 上传功能对应的UI模板如下。
<!-- 上传图片 -->
<view class="list-http">
<button @click="uploadImg">上传图片</button>
<text class="list-http-txt">响应内容：</text>
<image
class="list-http-img"
:src="httpInfo.uploadImgUrl"
mode="widthFix"
></image>
</view>
<!-- 上传文件 -->
<!-- #ifdef H5 || MP-WEIXIN -->
<view class="list-http">
<uni-file-picker
ref="files"
:auto-upload="false"
limit="1"
title="最多选择1个文件"
file-mediatype="all"
mode="list"
@select="fileSelect"
@progress="fileProgress"
@success="fileSuccess"
@fail="fileFail"
></uni-file-picker>
<text class="list-http-txt">响应内容：{{ httpInfo.uploadFileUrl }}</text>
</view>
<!-- #endif -->脚本方法
- 定义相关数据状态。
let httpInfo = reactive({
request: null,
imgUrl: "",
fileUrl: "",
uploadImgUrl: "",
uploadFileUrl: "",
});- 封装并暴露请求方法。
// 请求内容
async function sendReq() {
let opts = {
url: proxy.$apis.urls.food,
method: "get",
};
let data = await proxy.$http.request(opts);
if (data.code == 200) {
httpInfo.request = JSON.stringify(data.data.list);
}
console.log("请求内容：", data);
}- 实现图片下载逻辑。
// 下载图片
async function downloadImg() {
let opts = {
url: proxy.$apis.urls.img,
};
let data = await proxy.$http.download(opts);
if (data) {
httpInfo.imgUrl = data;
}
}- 实现通用文件下载逻辑。
// 下载文件
async function downloadFile() {
let opts = {
url: proxy.$apis.urls.txt,
};
let data = await proxy.$http.download(opts);
console.log(data);
if (data) {
httpInfo.fileUrl = data;
}
}- 实现图片上传逻辑。
// 上传图片
async function uploadImg() {
uni.chooseImage({
complete(res) {
if (res.tempFiles) {
let file = res.tempFiles[0];
uploadSet(file.path);
}
},
});
}- 实现通用文件上传逻辑。
// 上传文件
// 获取上传状态
function fileSelect(e) {
console.log("选择文件：", e);
if (e.tempFiles) {
let file = e.tempFiles[0];
uploadSet(file.path, "file");
}
}
// 获取上传进度
function fileProgress(e) {
console.log("上传进度：", e);
}
// 上传成功
function fileSuccess(e) {
console.log("上传成功");
}
// 上传失败
function fileFail(e) {
console.log("上传失败：", e);
}- 处理具体的上传操作细节。
// 上传操作
async function uploadSet(filePath, type = "img") {
let opts = {
url: proxy.$apis.urls.upload,
filePath,
};
let data = await proxy.$http.upload(opts);
if (data.code == 200) {
httpInfo[type == "img" ? "uploadImgUrl" : "uploadFileUrl"] = data.data.url;
httpInfo.fileName = data.data.filename;
} else {
uni.showToast({
title: data.data.info,
icon: "error",
});
}
}案例展示
请求方法预览
文件下载预览
下载图片的界面效果。
下载文件的界面效果。
文件上传预览
上传图片的界面效果。
上传文件的界面效果。
最后
以上即为uniapp中封装通用请求、上传及下载方法的核心内容，如需了解更多相关技术细节，请关注本站后续文章。