导语：在日常开发过程中，前端经常要和后端进行接口联调，获取并且渲染数据到页面中，接下来就总结一下 uniapp 中获取请求、文件下载和上传的一些方法。
目录
- 原理分析
- 方法实现
- 实战演练
- 案例展示
原理分析
主要是使用uni.request方法来发送请求，uni.downloadFile方法来下载文件，uni.uploadFile方法来上传文件。
以下方法存于根目录下的scripts文件夹下的http.js文件中。
方法实现
接下来一一说明如何实现数据请求、文件下载以及文件的上传的方法封装。
数据请求
这个方法要接收一些参数，和现有默认参数合并，然后传给请求 API，获取数据后使用try...catch来处理成功和失败。
这里要引入一些文件，包括请求的域名和地址，以及一些通用方法，就先省略了，接口可以到网上找一下公共的，或者自己使用 node 搭建一个简易的接口服务器。
// 网络请求
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,
},
};
}
}
写好以后记得导出方法。
实战演练
模板内容
- 请求内容
<view class="list-http">
<button @click="sendReq">发起请求</button>
<text class="list-http-txt">响应内容：{{ httpInfo.request }}</text>
</view>
- 下载内容
<!-- 下载图片 -->
<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>
- 上传内容
<!-- 上传图片 -->
<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",
});
}
}
案例展示
请求方法预览
文件下载预览
-
下载图片
-
下载文件
文件上传预览
-
上传图片
-
上传文件
最后
以上就是封装通用请求上传以及下载方法的主要内容，有不足之处，请多多指正。
