0
点赞
收藏
分享

微信扫一扫

8.5 网络请求uni.request(OBJECT) 常用API【uni-app教程uniapp教程(黄菊华-跨平台开发系列教程)】

老罗话编程 2022-03-12 阅读 71


8.5 网络请求uni.request(OBJECT)

发起网络请求。

在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。

OBJECT 参数说明

8.5 网络请求uni.request(OBJECT) 常用API【uni-app教程uniapp教程(黄菊华-跨平台开发系列教程)】_json

8.5 网络请求uni.request(OBJECT) 常用API【uni-app教程uniapp教程(黄菊华-跨平台开发系列教程)】_服务器_02

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。

示例

uni.request({
url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});

返回值

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

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

如果没有传入 success / fail / complete 参数,则会返回封装后的 Promise 对象:Promise 封装

通过 requestTask,可中断请求任务。

requestTask 对象的方法列表

8.5 网络请求uni.request(OBJECT) 常用API【uni-app教程uniapp教程(黄菊华-跨平台开发系列教程)】_服务器_03

示例

const requestTask = uni.request({
url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
data: {
name: 'name',
age: 18
},
success: function(res) {
console.log(res.data);
}
});

// 中断请求任务

requestTask.abort();

提示:

 请求的 header 中 content-type 默认为 application/json。

 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。

 H5 端本地调试需注意跨域问题

 注意由于百度小程序iOS客户端,请求失败时会进入fail回调,需要针对百度增加相应的处理以解决该问题。

 注意非 H5 端不支持自动保持 cookie,服务器应避免验证 cookie。如果服务器无法修改,也可以使用一些模拟手段,比如这样的工具https://github.com/charleslo1/weapp-cookie 可以请求时带上 cookie 并将响应的 cookie 保存在本地。

 H5端 cookie 受跨域限制(和平时开发网站时一样),但 uni.request 目前未支持 withCredentials 配置,可以直接使用 xhr 对象或者其他类库。

 根据 W3C 规范,H5 端无法获取 response header 中 Set-Cookie、Set-Cookie2 这2个字段,对于跨域请求,允许获取的 response header 字段只限于“simple response header”和“Access-Control-Expose-Headers”

 uni-app 插件市场有flyio、axios等三方封装的拦截器可用

 低版本手机自身不支持 ipv6,如果服务器仅允许 ipv6,会导致老手机无法正常运行或访问速度非常慢

 localhost、127.0.0.1等服务器地址,只能在电脑端运行,手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络

 debug 模式,安卓端暂时无法获取响应头,url中含有非法字符(如未编码为%20的空格)时会请求失败

 iOS App第一次安装启动后,会弹出是否允许联网的询问框,在用户点击同意前,调用联网API会失败。请注意判断这种情况。比如官方提供的新闻模板示例(HBuilderX新建项目可选择),会判断如果无法联网,则提供一个错误页,提示用户设置网络及下拉刷新重试。

 良好体验的App,还会判断当前是否处于飞行模式、是wifi还是3G

 部分安卓设备,真机运行或debug模式下的网络,低于release模式很多。

 使用一些比较小众的证书机构(如:CFCA OV OCA)签发的 ssl 证书在安卓设备请求会失败,因为这些机构的根证书不在系统内置根证书库,可以更换其他常见机构签发的证书(如:Let’s Encrypt),或者配置 sslVerify 为 false 关闭 ssl 证书验证(不推荐)。

 单次网络请求数据量建议控制在50K以下(仅指json数据,不含图片),过多数据应分页获取,以提升应用体验。


举报

相关推荐

0 条评论