RequestTask wx.request(Object object)
本接口从基础库版本 1.9.6 起支持在小程序插件中使用
发起 HTTPS 网络请求。使用前请注意阅读相关说明。
1、参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
url | string | 是 | 开发者服务器接口地址 | ||
data | string/object/ArrayBuffer | 否 | 请求的参数 | ||
header | Object | 否 | 设置请求的 header,header 中不能设置 Referer。content-type 默认为 application/json |
||
timeout | number | 否 | 超时时间,单位为毫秒 | 2.10.0 | |
method | string | GET | 否 | HTTP 请求方法 | |
dataType | string | json | 否 | 返回的数据格式 | |
responseType | string | text | 否 | 响应的数据类型 | 1.7.0 |
enableHttp2 | boolean | false | 否 | 开启 http2 | 2.10.4 |
enableQuic | boolean | false | 否 | 开启 quic | 2.10.4 |
enableCache | boolean | false | 否 | 开启 cache | 2.10.4 |
success | function | 否 | 接口调用成功的回调函数 | ||
fail | function | 否 | 接口调用失败的回调函数 | ||
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
2、object.methodHTTP 请求方法的合法值
值 | 说明 | 最低版本 |
---|---|---|
OPTIONS | HTTP 请求 OPTIONS | |
GET | HTTP 请求 GET | |
HEAD | HTTP 请求 HEAD | |
POST | HTTP 请求 POST | |
PUT | HTTP 请求 PUT | |
DELETE | HTTP 请求 DELETE | |
TRACE | HTTP 请求 TRACE | |
CONNECT | HTTP 请求 CONNECT |
3、object.dataType返回的数据格式的合法值
值 | 说明 | 最低版本 |
---|---|---|
json | 返回的数据为 JSON,返回后会对返回的数据进行一次 JSON.parse | |
其他 | 不对返回的内容进行 JSON.parse |
4、object.responseType响应的数据类型的合法值
值 | 说明 | 最低版本 |
---|---|---|
text | 响应的数据为文本 | |
arraybuffer | 响应的数据为 ArrayBuffer |
5、object.success接口调用成功的回调函数
1)、参数
Object res
属性 | 类型 | 说明 | 最低版本 |
---|---|---|---|
data | string/Object/Arraybuffer | 开发者服务器返回的数据 | |
statusCode | number | 开发者服务器返回的 HTTP 状态码 | |
header | Object | 开发者服务器返回的 HTTP Response Header | 1.2.0 |
cookies | Array.<string> | 开发者服务器返回的 cookies,格式为字符串数组 | 2.10.0 |
profile | Object | 网络请求过程中一些调试信息 | 2.10.4 |
res.profile 的结构
属性 | 类型 | 说明 |
---|---|---|
redirectStart | number | 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算,否则值为 0 |
redirectEnd | number | 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算,否则值为 0 |
fetchStart | number | 组件准备好使用 HTTP 请求抓取资源的时间,这发生在检查本地缓存之前 |
domainLookupStart | number | DNS 域名查询开始的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等 |
domainLookupEnd | number | DNS 域名查询完成的时间,如果使用了本地缓存(即无 DNS 查询)或持久连接,则与 fetchStart 值相等 |
connectStart | number | HTTP(TCP) 开始建立连接的时间,如果是持久连接,则与 fetchStart 值相等。注意如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接开始的时间 |
connectEnd | number | HTTP(TCP) 完成建立连接的时间(完成握手),如果是持久连接,则与 fetchStart 值相等。注意如果在传输层发生了错误且重新建立连接,则这里显示的是新建立的连接完成的时间。注意这里握手结束,包括安全连接建立完成、SOCKS 授权通过 |
SSLconnectionStart | number | SSL建立连接的时间,如果不是安全连接,则值为 0 |
SSLconnectionEnd | number | SSL建立完成的时间,如果不是安全连接,则值为 0 |
requestStart | number | HTTP请求读取真实文档开始的时间(完成建立连接),包括从本地读取缓存。连接错误重连时,这里显示的也是新建立连接的时间 |
requestEnd | number | HTTP请求读取真实文档结束的时间 |
responseStart | number | HTTP 开始接收响应的时间(获取到第一个字节),包括从本地读取缓存 |
responseEnd | number | HTTP 响应全部接收完成的时间(获取到最后一个字节),包括从本地读取缓存 |
rtt | number | 当次请求连接过程中实时 rtt |
estimate_nettype | string | 评估的网络状态 slow 2g/2g/3g/4g |
httpRttEstimate | number | 协议层根据多个请求评估当前网络的 rtt(仅供参考) |
transportRttEstimate | number | 传输层根据多个请求评估的当前网络的 rtt(仅供参考) |
downstreamThroughputKbpsEstimate | number | 评估当前网络下载的kbps |
throughputKbps | number | 当前网络的实际下载kbps |
peerIP | string | 当前请求的IP |
port | number | 当前请求的端口 |
socketReused | boolean | 是否复用连接 |
sendBytesCount | number | 发送的字节数 |
receivedBytedCount | number | 收到字节数 |
6、返回值
RequestTask
基础库 1.4.0 开始支持,低版本需做兼容处理。
请求任务对象
7、data 参数说明
最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String 。转换规则如下:
- 对于
GET
方法的数据,会将数据转换成 query string(encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...
) - 对于
POST
方法且header['content-type']
为application/json
的数据,会对数据进行 JSON 序列化 - 对于
POST
方法且header['content-type']
为application/x-www-form-urlencoded
的数据,会将数据转换成 query string(encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)
8、示例代码
1)、JAVASCRIPT代码:
// pages/demo6/demo6.js Page({ /** * 页面的初始数据 */ data: { dataList:[ {title:"这是标题1",time:"2020-05-02",url:"/images/banner1.jpg"}, {title:"这是标题2",time:"2020-04-30",url:"/images/banner2.jpg"}, {title:"这是标题3",time:"2020-03-26",url:"/images/banner3.jpg"} ], resData:[], num:1 }, nexePage:function(){ this.data.num++ this.getList(this.data.num); }, getList:function(p=1){ wx.request({ url: 'https://edu.newsight.cn/wxList.php', data:{ num:5, page:p }, success:res=>{ console.log(res) this.setData({ resData:res.data }) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getList(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
2)、WXML代码:
<view class="out"> <view class="row" wx:for="{{resData}}" wx:key="index"> <view class="pic"> <image src="{{item.picurl}}"></image> </view> <view class="text"> <view class="title">{{item.title}}</view> <view class="time">{{item.posttime}} - {{item.author}}</view> </view> </view> <button bindtap="nexePage" type="primary">下一页</button> </view>
3)、WXSS代码:
.out{ padding:30rpx;box-sizing: border-box;} .row{ display: flex; height: 150rpx;margin-bottom:20rpx;} .pic{flex:2;} .pic image{width:100%; height: 100%;} .text{flex:8; border-bottom:1px solid #eee; padding-left:10rpx; display: flex; flex-direction: column; justify-content: space-between;} .text .title{ font-size:38rpx;} .text .time{ color:#999;}