uniapp項(xiàng)目實(shí)踐封裝通用請(qǐng)求上傳以及下載方法總結(jié)

更新時(shí)間：2023年09月14日 11:13:09 作者：MarkGuan

在日常開(kāi)發(fā)過(guò)程中,前端經(jīng)常要和后端進(jìn)行接口聯(lián)調(diào),獲取并且渲染數(shù)據(jù)到頁(yè)面中,接下來(lái)就總結(jié)一下?uniapp?中獲取請(qǐng)求、文件下載和上傳的一些方法

原理分析

主要是使用uni.request方法來(lái)發(fā)送請(qǐng)求，uni.downloadFile方法來(lái)下載文件，uni.uploadFile方法來(lái)上傳文件。

以下方法存于根目錄下的scripts文件夾下的http.js文件中。

方法實(shí)現(xiàn)

接下來(lái)一一說(shuō)明如何實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求、文件下載以及文件的上傳的方法封裝。

數(shù)據(jù)請(qǐng)求

這個(gè)方法要接收一些參數(shù)，和現(xiàn)有默認(rèn)參數(shù)合并，然后傳給請(qǐng)求 API，獲取數(shù)據(jù)后使用try...catch來(lái)處理成功和失敗。

這里要引入一些文件，包括請(qǐng)求的域名和地址，以及一些通用方法，就先省略了，接口可以到網(wǎng)上找一下公共的，或者自己使用 node 搭建一個(gè)簡(jiǎn)易的接口服務(wù)器。

// 網(wǎng)絡(luò)請(qǐng)求
async function request(options) {
  let isHttp = options.url.indexOf("http") &gt; -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("請(qǐng)求參數(shù)：", 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,
      },
    };
  }
}

文件下載

這個(gè)就和請(qǐng)求一樣，只不過(guò) API 不一樣，看一下內(nèi)容。

// 下載文件
async function download(options) {
  let isHttp = options.url.indexOf("http") &gt; -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("下載參數(shù)：", 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,
      },
    };
  }
}

文件上傳

文件上傳同以上一樣，簡(jiǎn)單封裝一下。

// 上傳文件
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("上傳參數(shù)：", 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,
      },
    };
  }
}

寫(xiě)好以后記得導(dǎo)出方法。

實(shí)戰(zhàn)演練

模板內(nèi)容

請(qǐng)求內(nèi)容

<view class="list-http">
  <button @click="sendReq">發(fā)起請(qǐng)求</button>
  <text class="list-http-txt">響應(yīng)內(nèi)容：{{ httpInfo.request }}</text>
</view>

下載內(nèi)容

<!-- 下載圖片 -->
<view class="list-http">
  <button @click="downloadImg">下載圖片</button>
  <text class="list-http-txt">響應(yīng)內(nèi)容：</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">響應(yīng)內(nèi)容：{{ httpInfo.fileUrl }}</text>
</view>

上傳內(nèi)容

<!-- 上傳圖片 -->
<view class="list-http">
  <button @click="uploadImg">上傳圖片</button>
  <text class="list-http-txt">響應(yīng)內(nèi)容：</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個(gè)文件"
    file-mediatype="all"
    mode="list"
    @select="fileSelect"
    @progress="fileProgress"
    @success="fileSuccess"
    @fail="fileFail"
  ></uni-file-picker>
  <text class="list-http-txt">響應(yīng)內(nèi)容：{{ httpInfo.uploadFileUrl }}</text>
</view>
<!-- #endif -->

腳本方法

定義數(shù)據(jù)

let httpInfo = reactive({
  request: null,
  imgUrl: "",
  fileUrl: "",
  uploadImgUrl: "",
  uploadFileUrl: "",
});

請(qǐng)求方法

// 請(qǐng)求內(nèi)容
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("請(qǐng)求內(nèi)容：", 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);
      }
    },
  });
}

上傳文件

// 上傳文件

// 獲取上傳狀態(tài)
function fileSelect(e) {
  console.log("選擇文件：", e);
  if (e.tempFiles) {
    let file = e.tempFiles[0];
    uploadSet(file.path, "file");
  }
}

// 獲取上傳進(jìn)度
function fileProgress(e) {
  console.log("上傳進(jìn)度：", 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",
    });
  }
}