uni.request基本用法
uni.request({
url: 'https://your-api-url.com/data', // 必填,请求的url
method: 'GET', // 默认为GET,请求方法
data: { // 请求的参数
key: 'value'
},
header: { // 设置请求的header
'content-type': 'application/json' // 默认值
},
success: (res) => {
console.log('请求成功', res.data);
},
fail: (err) => {
console.log('请求失败', err);
},
complete: () => {
console.log('请求完成');
}
});
2.2 配置说明
- url: 请求的地址。
- method: 请求方法,如'GET', 'POST'等。
- data: 请求的参数,格式根据
content-type
决定。 - header: 设置请求的头信息。
- success: 请求成功的回调函数。
- fail: 请求失败的回调函数。
- complete: 不管成功还是失败,都会执行的回调函数。
uniapp.request(object)参数说明
- url (
string
): 必填参数,表示请求的URL地址。 - method (
string
, 默认:'GET'
): 请求方法,如'GET'
,'POST'
,'PUT'
,'DELETE'
等。 - data (
Object | String
): 请求的参数,如果是GET
请求则会转换为query字符串追加到URL上;如果是POST
请求等,则作为请求体发送。类型取决于content-type
设置。 - header (
Object
): 设置请求的头部信息,如{'content-type': 'application/json'}
。 - dataType (
string
, 默认:'json'
): 预期服务器返回的数据类型。合法值:'json'
,'text'
。 - responseType (
string
, 默认:'text'
): 设置响应的数据类型。合法值:'text'
,'arraybuffer'
。 - success (
Function
): 请求成功后的回调函数,参数为一个对象,包含服务器返回的数据。 - fail (
Function
): 请求失败的回调函数,参数为一个对象,包含错误信息。 - complete (
Function
): 不管成功还是失败,都会执行的回调函数,参数为一个对象,包含请求的响应信息。
使用uni.request需要注意以下几点。
1.在各小程序平台运行时,网络相关的API在使用前需要配置域名白名单。
2.请求的header中,content-type默认为application/json。
3.应避免在header中使用中文,或使用encodeURIComponent进行编码,否则百度小程序中将会
4.网络请求的超时时间,可以统一在项目manifest.json文件中配置networkTimeout属性。
5.H5端本地调试需注意跨域问题。
6.由于百度小程序iOS客户端请求失败时会进入fail回调,需要针对百度小程序增加相应的处理,以
解决该问题。
7.小程序端不支持自动保持cookie,服务器应避免验证cookie。
8.H5端cookie受跨域限制(和平时开发网站一样),旧版的uni.request未支持withCredentials配置,
可以直接使用xhr对象或其他类库。
9.根据W3C规范,H5端无法获取response header中的Set-Cookie、Set-Cookie2两个字段,对于跨域
请求,允许获取的response header字段只限于simple response header和Access-Control-Expose-Headerso
10.低版本(Android 8.0和iOS 12.1之前的版本)手机自身不支持IPv6,如果服务器仅允许IPv6,会导致低版本手机的应用无法正常运行或访问速度非常慢。
11.localhost、127.0.0.1等服务器地址只能在PC端运行,手机端连接时不能访问。应使用标准IP并保证手机能连接计算机网络。
12.debug模式中Android端暂时无法获取响应头,URI中含有非法字符(如未编码为%20的空格)时请求会失败。
13.iOS端App第一次安装启动后,会弹出是否允许联网的询问框,在用户点击同意前,调用联网API会失败,应注意判断这种情况。例如,官方提供的新闻模板示例(HBuilderX新建项目可选择)会判断如果无法联网,则提供一个错误页,提示用户设置网络及下拉刷新重试。
14.具有良好体验的App,还会判断当前是否处于飞行模式、网络是Wi-Fi还是移动网络。
15.部分Android设备,真机运行或debug模式下的网速比release模式低很多。
16.使用一些比较小众的证书机构(如CFCA OV OCA)签发的SSL证书在Android设备的网络请求会失败,因为这些机构的根证书不在系统内置根证书库中,可以更换其他常见机构签发的证书(如Let's Encrypt),或配置sslVerify为false,关闭SSL证书验证。
回单次网络请求数据量建议控制在50KB以下(仅指json数据,不含图片),数据过多时应分页获取,
uni.uploadFile基本用法
uni.uploadFile({
url: 'https://your-server.com/upload', // 必填,上传文件的服务器地址
filePath: '本地文件路径', // 必填,要上传的文件路径
name: 'file', // 服务器接收文件的字段名,默认为file
formData: { // HTTP 请求中其他额外的 form-data 参数
user: 'test'
},
header: { // 设置请求的 header
'content-type': 'multipart/form-data' // 默认值
},
success: (res) => {
console.log('上传成功', res.data);
},
fail: (err) => {
console.log('上传失败', err);
},
complete: () => {
console.log('上传完成');
}
});
(1)App平台支持多文件上传,微信小程序只支持单文件上传,上传多个文件需要反复调用图片上传
API,因此跨端的写法就是循环调用图片上传API。
(2)hello uni-app中的客服反馈支持多图上传。uni-app插件市场中也有多个封装的组件。
(3)App平台选择和上传非图像、视频文件的相关教程可参考“资源文件\网址索引.docx”中的链接。
(4)网络请求的超时时间可以统一在manifest.json文件中配置networkTimeout属性。
(5)支付宝小程序开发者工具上传文件返回的http状态码为字符串形式,支付宝小程序真机返回的状
态码为数字形式。
uploadTask对象
1. abort()
-
作用: 用于取消当前的上传任务。当调用此方法后,正在进行的上传将会被终止,相关的网络活动和资源占用也将被释放。
2. onProgressUpdate(callback)
-
作用: 注册一个监听函数,用于接收上传进度更新的事件。当文件上传过程中进度发生变化时,会触发此回调
let uploadTask = uni.uploadFile({
url: 'https://your-server.com/upload',
filePath: '本地文件路径',
name: 'file',
formData: {
user: 'username'
},
success: (res) => {
console.log('上传成功', res.data);
},
fail: (err) => {
console.error('上传失败', err);
}
});
// 监听上传进度
uploadTask.onProgressUpdate((res) => {
console.log('上传进度:' + res.progress + '%');
console.log('已上传字节数:' + res.totalBytesSent);
console.log('总字节数:' + res.totalBytesExpectedToSend);
});
// 取消上传
// uploadTask.abort();
uni.downloadFile基础使用
uni.downloadFile({
url: 'http://example.com/path/to/file', // 必填,下载文件的URL
header: { // 可选,设置请求的header
'content-type': 'application/octet-stream'
},
success: (res) => {
if (res.statusCode === 200) {
console.log('下载成功,临时路径为:', res.tempFilePath);
// 可以进一步处理文件,如保存到相册、打开等
} else {
console.error('下载失败,状态码:', res.statusCode);
}
},
fail: (err) => {
console.error('下载失败', err);
},
progress: (event) => {
console.log('下载进度', event.progress);
}
});
uni.
downloadTask方法
1. abort()
-
作用: 用于取消当前的下载任务。当调用此方法后,正在进行的下载将会被中断,相关资源也会被释放。
2. onProgressUpdate(callback)
-
作用: 注册一个监听函数,用于接收下载进度更新的事件。当下载过程中文件的下载进度发生变化时,会触发此回调。
-
参数:
-
callback
: 回调函数,接收一个对象作为参数,该对象通常包含以下属性:-
progress
: 当前下载进度百分比,取值范围为0到100。 -
totalBytesWritten
: 已经下载的文件大小,单位为字节。 -
totalBytesExpectedToWrite
: 预期下载的总文件大小,单位为字节。
-
-
-
let downloadTask = uni.downloadFile({
url: 'http://example.com/file.zip',
success: (res) => {
if (res.statusCode === 200) {
console.log('下载成功,临时路径为:', res.tempFilePath);
}
},
fail: (err) => {
console.error('下载失败', err);
}
});
// 监听下载进度
downloadTask.onProgressUpdate((res) => {
console.log('下载进度:' + res.progress + '%');
console.log('已下载字节数:' + res.totalBytesWritten);
console.log('预期总字节数:' + res.totalBytesExpectedToWrite);
});
// 可以在适当的时候取消下载
// downloadTask.abort();