uni-app发起请求以及请求封装,上传及下载功能(六)

文章目录

  • 一、发起网络请求
    • 1.使用及封装
    • 2. https 请求配置自签名证书
    • 3.拦截器
  • 二、上传下载
    • 1.上传 uni.uploadFile(OBJECT)
    • 2. 下载 uni.downloadFile(OBJECT)


一、发起网络请求

uni-app中内置的uni.request()已经很强大了,简单且好用。为了让其更好用,同时支持拦截器,支持Promise 写法,特对其进行封装。同时支持H5和小程序环境,

uni.request()是一个统一的网络请求接口,支持HTTP和HTTPS协议,可以处理GET、POST等请求方法。这个API提供了基本的HTTP请求功能,可以满足大部分应用的网络通信需求。
由于uni-app是基于Vue.js的,可以使用一些适用于前端的JavaScript网络库如axios 第三方库,支持Promise API,有丰富的拦截器、配置选项和错误处理。

1.使用及封装

使用uni.request()的步骤如下:

  1. 在需要发起网络请求的页面中引入uni.request()方法。
  2. 调用uni.request()方法,并传入相应的参数,包括请求地址、请求方法、请求头部和请求数据等。
  3. 监听请求的成功和失败回调,并在回调函数中处理返回的数据。
    参数说明
参数名类型必填默认值说明平台差异说明
urlString开发者服务器接口地址
dataObject/String/ArrayBuffer请求的参数App 3.3.7 以下不支持 ArrayBuffer 类型
headerObject设置请求的 header,header 中不能设置 RefererApp、H5端会自动带上cookie,且H5端不可手动修改
methodStringGET有效值详见下方说明
timeoutNumber60000超时时间,单位 msH5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序(2.10.0)、支付宝小程序
dataTypeStringjson如果设为 json,会对返回的数据进行一次 JSON.parse,非 json 不会进行 JSON.parse
responseTypeStringtext设置响应的数据类型。合法值:text、arraybuffer支付宝小程序不支持
sslVerifyBooleantrue验证 ssl 证书仅App安卓端支持(HBuilderX 2.3.3+),不支持离线打包
deferBooleanfalse控制当前请求是否延时至首屏内容渲染后发送百度小程序 3.310.11+
successFunction收到开发者服务器成功返回的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
  • method 有效值:method有效值必须大写,每个平台支持的method有效值不同
  • success 返回参数说明
参数类型说明
dataObject/String/ArrayBuffer开发者服务器返回的数据
statusCodeNumber开发者服务器返回的 HTTP 状态码
headerObject开发者服务器返回的 HTTP Response Header
cookiesArray<string>开发者服务器返回的 cookies,格式为字符串数组
  • data 数据说明
    最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String。转换规则如下:

    • 对于 GET 方法,会将数据转换为 query string。例如 { name: ‘name’, age: 18 } 转换后的结果是 name=name&age=18。
    • 对于 POST 方法且 header[‘content-type’] 为 application/json 的数据,会进行 JSON 序列化。
    • 对于 POST 方法且 header[‘content-type’] 为 application/x-www-form-urlencoded 的数据,会将数据转换为 query string。
    /*** 请求组件封装* url 请求地址* data 请求参数* method 请求的方法 默认get请求* contentType 请求内容类型 1 json 强求 2 form表单请求
    */function request({url, data, method='GET', contentType = '1'}) {let header = {'content-type': contentType == 1 ? 'application/json' : 'application/x-www-form-urlencoded'}let baseUrl = 'http://192.168.0.78';console.log(baseUrl + url)return new Promise((resolve, reject) => {uni.request({url: baseUrl + url,data,method,header,success: (res) => {console.log(res)if (res.statusCode == 200) {resolve(res.data)} else if (res.statusCode == 401) {uni.showToast({icon: 'none',title: '未登录或登录状态已超时',duration:1500,})} else if (res.statusCode == 405) {uni.showToast({icon: 'none',title: '请求方法错误',duration:1500,})} else {uni.showToast({icon: 'none',title: '请求错误' + res.statusCode,duration:1500,})}},})})
    }
    

    在这里插入图片描述

  • 返回值
    如果希望返回一个 requestTask 对象,需要至少传入 success / fail / complete 参数中的一个

    var requestTask = uni.request({url: 'http://192.168.0.18:8080/request', //仅为示例,并非真实接口地址。complete: ()=> {}
    });
    requestTask.abort();
    

    如果没有传入 success / fail / complete 参数,则会返回封装后的 Promise 对象
    通过 requestTask,可中断请求任务。
    requestTask 对象的方法列表

    方法参数说明
    abort中断请求任务
    offHeadersReceived取消监听 HTTP Response Header 事件,仅微信小程序平台支持
    onHeadersReceived监听 HTTP Response Header 事件。会比请求完成事件更早,仅微信小程序平台支持
    const requestTask = uni.request({url: 'http://192.168.0.18:8080/request', //仅为示例,并非真实接口地址。data: {name: 'name',age: 18},success: function(res) {console.log(res.data);}
    });// 中断请求任务
    requestTask.abort()
    

2. https 请求配置自签名证书

uni.configMTLS(OBJECT)
https 请求配置自签名证书,只有app支持,其他都不支持

  • OBJECT 参数说明
参数类型必填说明
certificatesArray<certificate>certificates 为数组,支持为多个域名配置自签名证书
successFunction(callbackObject)接口调用成功的回调函数
failFunction(callbackObject)接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
  • certificate 参数说明 证书配置项
参数类型必填说明
hoststring对应请求的域名(注意:不要协议部分)
clientstring客户端证书(服务器端需要验证客户端证书时需要配置此项,格式要求请参考下面的证书格式说明,注意 iOS 平台客户端证书只支持 .p12 类型的证书。HarmonyOS Next 上是证书路径)
keyPathstring证书秘钥的路径,只支持 HarmonyOS Next (HBuilderX 4.31)
clientPasswordstring客户端证书对应的密码(客户端证书存在时必须配置此项。HarmonyOS Next 上是证书秘钥的密码)
serverArray<string>服务器端证书(客户端需要对服务器端证书做校验时需要配置此项,通常使用自签名证书时才需要配置,格式要求请参考下面的证书格式说明,注意 iOS 平台服务器端证书只支持 .cer 类型的证书,不仅仅验证公钥,还要验证整个证书链,请保证证书的完整性。HarmonyOS Next 不支持)
  • 证书格式说明
    证书支持两种格式,文件格式和 Base64字符串格式
    1. 文件格式说明:可将证书文件放到工程的 ‘static’ 目录中(当然也可以通过请求下载到本地),然后填写文件路径,
    2. Base64String格式说明:将证书文件的二进制转换为 Base64String 字符串,然后在字符串前面添加’data:cert/pem;base64,'前缀,示例:‘data:cert/pem;base64,xxx’ xxx 代表真实的证书 base64String
uni.configMTLS({certificates: [{'host': 'www.baidu.com','client': '/static/client.p12','clientPassword': '123456789','server': ['/static/server.cer'],}],success ({code}) {// 类型是Number	成功返回 0,失败返回相应 code 码}
});

3.拦截器

uni.addInterceptor(STRING, OBJECT)

  • STRING 参数说明
    需要拦截的api名称,如:uni.addInterceptor(‘request’, OBJECT) ,将拦截 uni.request()


    仅支持异步接口,如:uni.setStorage(OBJECT),暂不支持同步接口如:uni.setStorageSync(KEY,DATA)
    uniCloud请求云端接口时(callFunction、uploadFile等)也会使用uni.request发送请求,请确保拦截器内不错误的处理此类请求

  • OBJECT 参数说明

参数名类型必填默认值说明平台差异说明
invokeFunction拦截前触发
returnValueFunction方法调用后触发,处理返回值
successFunction成功回调拦截
failFunction失败回调拦截
completeFunction完成回调拦截
uni.addInterceptor('request', {invoke(args) {// 在请求发送之前的处理console.log('请求拦截:', args);// 可以修改args中的参数// 例如: 添加token// args.header = args.header || {};// args.header['Authorization'] = 'Bearer ' + getToken();},success(args) {// 在请求成功之后的处理console.log('请求成功拦截:', args);},fail(err) {// 在请求失败之后的处理console.error('请求失败拦截:', err);},complete() {// 在请求结束之后的处理console.log('请求结束拦截');}
});uni.addInterceptor({returnValue(args) {// 只返回 data 字段return args.data}
})
  • 删除拦截器
    uni.removeInterceptor(STRING)
    STRING:需要删除拦截器的api名称
// 移除请求拦截器
uni.removeInterceptor('request');

二、上传下载

1.上传 uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-type 为 multipart/form-data。 如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。

注:
1:在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。
2::App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
3:网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
4:支付宝小程序开发工具上传文件返回的http状态码为字符串形式,支付宝小程序真机返回的状态码为数字形式

  • OBJECT参数说明

    参数名类型必填说明平台差异说明
    urlString开发者服务器 url
    filesArray是(files和filePath选其一)需要上传的文件列表。使用 files 时,filePath 和 name 不生效。App、H5( 2.6.15+)
    fileTypeString开发者服务器 url仅支付宝小程序,且必填。
    fileFile要上传的文件对象。仅H5(2.6.15+)支持
    filePathString是(files和filePath选其一)要上传文件资源的路径。
    nameString文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
    headerObjectHTTP 请求 Header, header 中不能设置 Referer。
    timeoutString超时时间,单位 msH5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序、支付宝小程序、抖音小程序、快手小程序
    formDataObjectHTTP 请求中其他额外的 form data
    successString接口调用成功的回调函数
    failString接口调用失败的回调函数
    completeString接口调用结束的回调函数(调用成功、失败都会执行)
    // html
    <button @click="handleUpload">上传文件</button>
    // jsuni.chooseImage({success: (chooseImageRes) => {console.log(chooseImageRes)const tempFilePaths = chooseImageRes.tempFilePaths;uni.uploadFile({url: 'http://192.168.0.18:8080/jeecg-boot/sys/common/uploadImagea', //仅为示例,非真实的接口地址filePath: tempFilePaths[0],name: 'file',formData: {'user': 'test'},success: (uploadFileRes) => {console.log(uploadFileRes.data);}});}});
    

    console.log(chooseImageRes)打印心疼

  • 返回值
    如果希望返回一个 uploadTask 对象,需要至少传入 success / fail / complete 参数中的一个

    var uploadTask = uni.uploadFile({url: 'http://192.168.0.18:8080/jeecg-boot/sys/common/uploadImagea', //仅为示例,并非真实接口地址。complete: ()=> {}
    });
    uploadTask.abort();
    

    uploadTask如果没有传入 success / fail / complete 参数,则会返回封装后的 Promise 对象
    在这里插入图片描述
    通过uploadTask ,可以监听上传进度变化事件,以及取消上传任务
    uploadTask 对象的方法列表

    方法参数说明
    abort中断上传任务
    onProgressUpdatecallback监听上传进度变化
    onHeadersReceivedcallback监听 HTTP Response Header 事件。会比请求完成事件更早,仅微信小程序平台支持
    offProgressUpdatecallback取消监听上传进度变化事件,仅微信小程序平台支持
    offHeadersReceivedcallback取消监听 HTTP Response Header 事件,仅微信小程序平台支持
     let uploadTask =	uni.uploadFile({url: 'http://192.168.0.18:8084/jeecg-boot/sys/common/uploadImagea', //仅为示例,非真实的接口地址complete: ()=> {}
    });
    console.log(uploadTask)
    uploadTask.onProgressUpdate((res) => {console.log(res)console.log('上传进度' + res.progress);console.log('已经上传的数据长度' + res.totalBytesSent);console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);// 测试条件,取消上传任务。if (res.progress > 50) {uploadTask.abort();}
    });
    

    在这里插入图片描述
    注:后面会有文章对uni.chooseImage的介绍

2. 下载 uni.downloadFile(OBJECT)

下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径。

注:
在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。
在h5上是跨域的,用户需要处理好跨域问题。
网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。

  • OBJECT 参数说明
参数名类型必填说明平台差异说明
urlString下载资源的 url
headerObjectHTTP 请求 Header, header 中不能设置 Referer。
timeoutString超时时间,单位 msH5、APP、微信小程序、支付宝小程序、抖音小程序、快手小程序
filePathString指定文件下载后存储的路径 (本地路径)小程序端支持(微信IOS小程序保存到相册需要添加此字段才可以正常保存)
successString下载成功后以 tempFilePath 的形式传给页面,res = {tempFilePath: ‘文件的临时路径’}
failString接口调用失败的回调函数
completeString接口调用结束的回调函数(调用成功、失败都会执行)

注: 文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 uni.saveFile,才能在应用下次启动时访问得到。

  • success 返回参数说明
参数类型说明平台差异说明
tempFilePathString临时文件路径,下载后的文件会存储到一个临时文件微信小程序、支付宝小程序、百度小程序、抖音小程序、飞书小程序
statusCodeNumber开发者服务器返回的 HTTP 状态码微信小程序、QQ小程序、百度小程序、抖音小程序、飞书小程序
apFilePathString下载文件保存的路径(本地临时文件)。入参未指定 filePath 的情况下可用支付宝小程序
filePathString用户文件路径 (本地路径)。传入 filePath 时会返回,跟传入的 filePath 一致微信小程序、支付宝小程序、抖音小程序、飞书小程序
fileContentBuffer文件内容QQ小程序
uni.downloadFile({url: 'http://192.168.0.18:8084/jeecg-boot/sys/common/file/test', //仅为示例,并非真实的资源success: (res) => {if (res.statusCode === 200) {console.log('下载成功');}}
});
  • 返回值
    如果希望返回一个 downloadTask 对象,需要至少传入 success / fail / complete 参数中的一个。

    var downloadTask = uni.downloadFile({url: 'https://www.example.com/file/test', //仅为示例,并非真实接口地址。complete: ()=> {}
    });
    downloadTask.abort();
    

    如果没有传入 success / fail / complete 参数,则会返回封装后的 Promise 对象
    通过 downloadTask,可监听下载进度变化事件,以及取消下载任务。

  • downloadTask 对象的方法列表

    方法参数说明
    abort中断下载任务
    onProgressUpdatecallback监听下载进度变化
    onHeadersReceivedcallback监听 HTTP Response Header 事件,会比请求完成事件更早,仅微信小程序平台支持
    offProgressUpdatecallback取消监听下载进度变化事件,仅微信小程序平台支持
    offHeadersReceivedcallback取消监听 HTTP Response Header 事件,仅微信小程序平台支持
    const downloadTask = uni.downloadFile({url: 'http://192.168.0.18:8084/jeecg-boot/sys/common/download', //仅为示例,并非真实的资源success: (res) => {if (res.statusCode === 200) {console.log('下载成功');}}
    });downloadTask.onProgressUpdate((res) => {console.log('下载进度' + res.progress);console.log('已经下载的数据长度' + res.totalBytesWritten);console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);// 满足测试条件,取消下载任务。if (res.progress > 50) {downloadTask.abort();}
    });
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/59005.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

地理信息科学专业想搞GIS开发:学前端还是后端?

地理信息科学专业的同学是学前端开发比较好呢还是学后端开发比较好呢&#xff1f; 部分网友&#xff1a;学前端更好 主修前端更好&#xff0c;因为地信学后端&#xff0c;是卷不赢学计算机的 本科卷前端&#xff0c;硕士阶段可以卷后端 甚至有网友直呼&#xff0c;地信根本没有…

美格智能5G车规级通信模组:以连接+算力驱动智能化进阶

2023年3月&#xff0c;基于高通公司第二代骁龙汽车5G调制解调器及射频系统平台SA522M/SA525M&#xff0c;美格智能在德国纽伦堡嵌入式系统展上正式发布全新一代5G车规级C-V2X通信模组MA922系列&#xff0c;迅速引起行业和市场关注。随着5G高速网联逐步成为智能汽车标配&#xf…

win11不好用怎么退回win10_win11退回win10多种方法

最近有网友问我win11不好用怎么退回win10&#xff1f;win11感觉不好用&#xff0c;很多用户这时候想退回win10系统。电脑安装Win11系统觉得操作起来不太习惯&#xff0c;想要重新回到上一个系统&#xff0c;有什么办法实现?其实&#xff0c;微软也在Win11中准备了回退功能,让用…

「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现

自定义动画让开发者可以设计更加个性化和复杂的动画效果,适合表现独特的界面元素。鸿蒙提供了丰富的工具,支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。 关键词 自定义动画动画路径贝塞尔曲线动画控制一、Animat…

【分立元件】贴片电阻过电压故障机理

在文章:【分立元件】贴片电阻器的故障现象和原理 中我们讲到电阻故障现象类型。其中包括了由电气过载导致的电阻体烧损。 在文章:

ubuntu-开机黑屏问题快速解决方法

开机黑屏一般是由于显卡驱动出现问题导致。 快速解决方法&#xff1a; 通过ubuntu高级选项->recovery模式->resume->按esc即可进入recovery模式&#xff0c;进去后重装显卡驱动&#xff0c;重启即可解决。附加问题&#xff1a;ubuntu的默认显示管理器是gdm3,如果重…

Java已死,大模型才是未来?

作者&#xff1a;不惑_ 引言 在数字技术的浪潮中&#xff0c;编程语言始终扮演着至关重要的角色。Java&#xff0c;自1995年诞生以来&#xff0c;便以其跨平台的特性和丰富的生态系统&#xff0c;成为了全球范围内开发者们最为青睐的编程语言之一 然而&#xff0c;随着技术的…

24小时跑2W+销售额,本地生活+数字人直播模式真好用!

本地生活AI数字人直播的模式已经火热了一段时间了&#xff0c;但依旧有商家还不清楚这个模式到底好不好用&#xff1f;这里我就给大家稍微讲解下这种模式驱动下&#xff0c;对于商家来说究竟会有哪些好处。 先给大家看看已经跑了20多小时的两个数字人直播间&#xff0c;可以看到…

基于LLaMA Factory对LLama 3指令微调的操作学习笔记

一、环境 在vscode中用连接云服务器&#xff0c;打开文件目录。 df -h #查看盘容量 二、下载LLaMA Factory框架和数据 下载LLaMA Factory到云服务器 git clone https://github.com/hiyouga/LLaMA-Factory.git cd LLaMA-Factory pip install -e . pip install -e .命令的含…

钢琴曲相关

黑键大调问题 等音调&#xff0c;等音的调式化 通常用bE大调来形容&#xff0c;毕竟只有四个# #D大调不常用&#xff0c;但不是不会用 重点是是要交流的&#xff0c;而交流是需要简洁的 &#xff0c;于是乎&#xff0c;一组七音&#xff0c;的12个键&#xff0c;每个里面都会…

启用 iPhone 原生的五笔输入

聊聊如何在 iOS 中使用原生的五笔输入法 本文虽然介绍的是如何添加五笔键盘&#xff0c;其实其他键盘&#xff08;双拼&#xff0c;外语键盘、第三方输入法&#xff09;也是类似的添加方式。 ‍ 使用原生的理由 虽然之前的文章列了不少第三方的五笔输入法&#xff0c;但其实…

了解DEA算法

在信息安全领域&#xff0c;加密算法是保护数据机密性、完整性和可用性的关键工具。随着技术的不断进步和威胁的不断演变&#xff0c;各种加密算法应运而生&#xff0c;以满足不同场景下的安全需求。其中&#xff0c;DEA算法&#xff08;尽管“DEA”并非一个广泛认知的加密算法…

Spring Boot与gRPC的整合

一、gRPC的介绍 在gRPC中&#xff0c;客户机应用程序可以直接调用不同机器上的服务器应用程序上的方法&#xff0c;就像它是本地对象一样&#xff0c;使您更容易创建分布式应用程序和服务。与许多RPC系统一样&#xff0c;gRPC基于定义服务的思想&#xff0c;指定可以远程调用的…

代理IPv6知识分享课堂二

嗨朋友们&#xff0c;欢迎来到今天的代理IPv6知识分享课堂&#xff0c;小蝌蚪上堂课跟大家一起认识了它的概念和工作原理等基础内容&#xff0c;我们算是对它有了一个初步的了解&#xff0c;那今天这节课我们讲的会深入点&#xff0c;我们今天来了解了解它的应用场景和切实地教…

恋爱脑学Rust之dyn关键字的作用

在 Rust 语言中&#xff0c;dyn 关键字允许我们在使用特征时创建“动态派发”——即通过一个统一的接口操作多种类型的具体实现。可以把它理解成一种“浪漫的妥协”&#xff1a;当我们不知道未来会爱上谁&#xff0c;只知道对方一定具有某种特征时&#xff0c;dyn 就像一个协议…

android浏览器源码 可输入地址或关键词搜索 android studio 2024 可开发可改地址

Android 浏览器是一种运行在Android操作系统上的应用程序&#xff0c;主要用于访问和查看互联网内容。以下是关于Android浏览器的详细介绍&#xff1a; 1. 基本功能 Android浏览器提供了用户浏览网页的基本功能&#xff0c;如&#xff1a; 网页加载&#xff1a;支持加载静态…

Sketch下载安装,中文版在线免费用!

Sketch是一款轻便、高效的矢量设计工具&#xff0c;全球众多设计师借助它创造出了无数令人惊叹的作品。Sketch在下载安装方面&#xff0c;其矢量编辑、控件以及样式等功能颇具优势&#xff0c;不过&#xff0c;Sketch中文版即时设计在下载安装方面也毫不逊色。即时设计是一个一…

Golang | Leetcode Golang题解之第526题优美的排列

题目&#xff1a; 题解&#xff1a; func countArrangement(n int) int {f : make([]int, 1<<n)f[0] 1for mask : 1; mask < 1<<n; mask {num : bits.OnesCount(uint(mask))for i : 0; i < n; i {if mask>>i&1 > 0 && (num%(i1) 0 |…

8进制在线编码工具--实现8进制编码

具体前往&#xff1a;文本转八进制在线工具-将文本字符串转换为8进制编码,支持逗号&#xff0c;空格和反斜杠分隔符

基于hive分析Flask为后端框架echarts为前端框架的招聘网站可视化大屏项目

基于hive分析Flask为后端框架echarts为前端框架的招聘网站可视化大屏项目 1. 项目概述 项目目标是构建一个大数据分析系统&#xff0c;包含以下核心模块&#xff1a; 1、数据爬取&#xff1a;通过request请求获取猎聘网的就业数据。 2、数据存储和分析&#xff1a;使用 Hive …