はじめに: 日々の開発プロセスでは、フロントエンドはバックエンドと連携してデータを取得し、ページにレンダリングする必要がよくあります。次に、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",
});
}
}
ケースディスプレイ
リクエストメソッドのプレビュー
ファイルダウンロードのプレビュー
-
写真をダウンロードする
-
ダウンロードファイル
ファイルアップロードのプレビュー
-
画像をアップロードする
-
ファイルをアップロードする
やっと
上記は、ユニバーサル リクエストのアップロードおよびダウンロード メソッドをカプセル化する主な内容ですが、不足している場合は修正してください。