uni-app-网络请求

开拓者制服组 發表於 2020-8-27 14:09:00

官方文档
 
<h3 id="request">uni.request(OBJECT)</h3>
发起网络请求。
<blockquote>
在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。
</blockquote>
OBJECT 参数说明
<table>
<thead>
<tr><th>参数名</th><th>类型</th><th>必填</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>String</td>
<td>是</td>
<td> </td>
<td>开发者服务器接口地址</td>
<td> </td>
</tr>
<tr>
<td>data</td>
<td>Object/String/ArrayBuffer</td>
<td>否</td>
<td> </td>
<td>请求的参数</td>
<td>App（自定义组件编译模式）不支持ArrayBuffer类型</td>
</tr>
<tr>
<td>header</td>
<td>Object</td>
<td>否</td>
<td> </td>
<td>设置请求的 header，header 中不能设置 Referer。</td>
<td>H5端会自动带上cookie不可手动覆盖</td>
</tr>
<tr>
<td>method</td>
<td>String</td>
<td>否</td>
<td>GET</td>
<td>有效值详见下方说明</td>
<td> </td>
</tr>
<tr>
<td>timeout</td>
<td>Number</td>
<td>否</td>
<td>30000</td>
<td>超时时间，单位 ms</td>
<td>微信小程序（2.10.0）、支付宝小程序</td>
</tr>
<tr>
<td>dataType</td>
<td>String</td>
<td>否</td>
<td>json</td>
<td>如果设为 json，会尝试对返回的数据做一次 JSON.parse</td>
<td> </td>
</tr>
<tr>
<td>responseType</td>
<td>String</td>
<td>否</td>
<td>text</td>
<td>设置响应的数据类型。合法值：text、arraybuffer</td>
<td>App和支付宝小程序不支持</td>
</tr>
<tr>
<td>sslVerify</td>
<td>Boolean</td>
<td>否</td>
<td>true</td>
<td>验证 ssl 证书</td>
<td>仅App安卓端支持（HBuilderX 2.3.3+）</td>
</tr>
<tr>
<td>withCredentials</td>
<td>Boolean</td>
<td>否</td>
<td>false</td>
<td>跨域请求时是否携带凭证（cookies）</td>
<td>仅H5支持（HBuilderX 2.6.15+）</td>
</tr>
<tr>
<td>firstIpv4</td>
<td>Boolean</td>
<td>否</td>
<td>false</td>
<td>DNS解析时优先使用ipv4</td>
<td>仅 App-Android 支持 (HBuilderX 2.8.0+)</td>
</tr>
<tr>
<td>success</td>
<td>Function</td>
<td>否</td>
<td> </td>
<td>收到开发者服务器成功返回的回调函数</td>
<td> </td>
</tr>
<tr>
<td>fail</td>
<td>Function</td>
<td>否</td>
<td> </td>
<td>接口调用失败的回调函数</td>
<td> </td>
</tr>
<tr>
<td>complete</td>
<td>Function</td>
<td>否</td>
<td> </td>
<td>接口调用结束的回调函数（调用成功、失败都会执行）</td>
<td> </td>
</tr>
</tbody>
</table>
method 有效值
必须大写，有效值在不同平台差异说明不同。
<table>
<thead>
<tr><th>method</th><th>App</th><th>H5</th><th>微信小程序</th><th>支付宝小程序</th><th>百度小程序</th><th>字节跳动小程序</th></tr>
</thead>
<tbody>
<tr>
<td>GET</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
</tr>
<tr>
<td>POST</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>
</tr>
<tr>
<td>PUT</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>x</td>
<td>√</td>
<td>√</td>
</tr>
<tr>
<td>DELETE</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>x</td>
<td>√</td>
<td>x</td>
</tr>
<tr>
<td>CONNECT</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>HEAD</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>x</td>
<td>√</td>
<td>x</td>
</tr>
<tr>
<td>OPTIONS</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>x</td>
<td>√</td>
<td>x</td>
</tr>
<tr>
<td>TRACE</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
success 返回参数说明
<table>
<thead>
<tr><th>参数</th><th>类型</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>Object/String/ArrayBuffer</td>
<td>开发者服务器返回的数据</td>
</tr>
<tr>
<td>statusCode</td>
<td>Number</td>
<td>开发者服务器返回的 HTTP 状态码</td>
</tr>
<tr>
<td>header</td>
<td>Object</td>
<td>开发者服务器返回的 HTTP Response Header</td>
</tr>
<tr>
<td>cookies</td>
<td><code>Array.<string></code></td>
<td>开发者服务器返回的 cookies，格式为字符串数组</td>
</tr>
</tbody>
</table>
data 数据说明
最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：
<ul>
<li>对于 <code>GET</code> 方法，会将数据转换为 query string。例如 <code>{ name: 'name', age: 18 }</code> 转换后的结果是 <code>name=name&age=18</code>。</li>
<li>对于 <code>POST</code> 方法且 <code>header['content-type']</code> 为 <code>application/json</code> 的数据，会进行 JSON 序列化。</li>
<li>对于 <code>POST</code> 方法且 <code>header['content-type']</code> 为 <code>application/x-www-form-urlencoded</code> 的数据，会将数据转换为 query string。</li>
</ul>
示例
<pre data-lang="javascript"><code class="lang-javascript">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';
}
});</code></pre>
返回值
如果希望返回一个 <code>requestTask</code> 对象，需要至少传入 success / fail / complete 参数中的一个。例如：
<pre data-lang="javascript"><code class="lang-javascript">var requestTask = uni.request({
url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
complete: ()=> {}
});
requestTask.abort();</code></pre>
如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象：Promise 封装
通过 <code>requestTask</code>，可中断请求任务。
requestTask 对象的方法列表
<table>
<thead>
<tr><th>方法</th><th>参数</th><th>说明</th></tr>
</thead>
<tbody>
<tr>
<td>abort</td>
<td> </td>
<td>中断请求任务</td>
</tr>
<tr>
<td>offHeadersReceived</td>
<td> </td>
<td>取消监听 HTTP Response Header 事件，仅<code>微信小程序平台</code>支持，文档详情</td>
</tr>
<tr>
<td>onHeadersReceived</td>
<td> </td>
<td>监听 HTTP Response Header 事件。会比请求完成事件更早，仅<code>微信小程序平台</code>支持，文档详情</td>
</tr>
</tbody>
</table>
示例
<pre data-lang="javascript"><code class="lang-javascript">const requestTask = uni.request({
url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
data: {
 name: 'name',
 age: 18
},
success: function(res) {
 console.log(res.data);
}
});

// 中断请求任务
requestTask.abort();</code></pre>
Tips
<ul>
<li>请求的 <code>header</code> 中 <code>content-type</code> 默认为 <code>application/json</code>。</li>
<li>避免在 <code>header</code> 中使用中文，或者使用 encodeURIComponent 进行编码，否则在百度小程序报错。（来自：快狗打车前端团队）</li>
<li>网络请求的 <code>超时时间</code> 可以统一在 <code>manifest.json</code> 中配置 networkTimeout。</li>
<li>H5 端本地调试需注意跨域问题，参考：调试跨域问题解决方案</li>
<li>注意由于百度小程序iOS客户端，请求失败时会进入fail回调，需要针对百度增加相应的处理以解决该问题。</li>
<li>注意非 H5 端不支持自动保持 cookie，服务器应避免验证 cookie。如果服务器无法修改，也可以使用一些模拟手段，比如这样的工具https://github.com/charleslo1/weapp-cookie 可以请求时带上 cookie 并将响应的 cookie 保存在本地。</li>
<li>H5端 cookie 受跨域限制（和平时开发网站时一样），但 uni.request 目前未支持 withCredentials 配置，可以直接使用 xhr 对象或者其他类库。</li>
<li>根据 W3C 规范，H5 端无法获取 response header 中 Set-Cookie、Set-Cookie2 这2个字段，对于跨域请求，允许获取的 response header 字段只限于“simple response header”和“Access-Control-Expose-Headers”（详情）</li>
<li>uni-app 插件市场有flyio、axios等三方封装的拦截器可用</li>
<li>低版本手机自身不支持 ipv6，如果服务器仅允许 ipv6，会导致老手机无法正常运行或访问速度非常慢</li>
<li>localhost、127.0.0.1等服务器地址，只能在电脑端运行，手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络</li>
<li>debug 模式，安卓端暂时无法获取响应头，url中含有非法字符（如未编码为%20的空格）时会请求失败</li>
<li>iOS App第一次安装启动后，会弹出是否允许联网的询问框，在用户点击同意前，调用联网API会失败。请注意判断这种情况。比如官方提供的新闻模板示例（HBuilderX新建项目可选择），会判断如果无法联网，则提供一个错误页，提示用户设置网络及下拉刷新重试。</li>
<li>良好体验的App，还会判断当前是否处于飞行模式（参考）、是wifi还是3G（参考）</li>
<li>部分安卓设备，真机运行或debug模式下的网络，低于release模式很多。</li>
<li>使用一些比较小众的证书机构（如：CFCA OV OCA）签发的 ssl 证书在安卓设备请求会失败，因为这些机构的根证书不在系统内置根证书库，可以更换其他常见机构签发的证书（如：Let's Encrypt），或者配置 sslVerify 为 false 关闭 ssl 证书验证（不推荐）。</li>
<li>单次网络请求数据量建议控制在50K以下（仅指json数据，不含图片），过多数据应分页获取，以提升应用体验。</li>
</ul>
<div class="cnblogs_code">
<pre><template>
<view>
 <view>
 <text selectable>唱跳Rap篮球{{name}}</text>
 </view>
 <view>
 <text selectable space="emsp">唱跳 Rap 篮球-{{name}}</text>
 </view>
 <view class="box" hover-class="box-active">
 
 <view class="box1" :hover-start-time="2000" :hover-stay-time="2000" hover-class="box1-active" hover-stop-propagation></view>
 </view>
 <view>
 <text>{{btn}}</text>
 <button @click="set_btn()" size="default" type="primary" plain loading>按钮</button>
 </view>
 <image src="http://img.gucci-outlets-online.com:8088/catch_down/20200427124446_683364.gif" mode="aspectFit"></image>
 <view v-for="(item,index) in arr" :key='item.id'>
 <view class="gogogo">
 {{index}}-{{item.title}}year{{item.year}}
 
 </view>
 </view>
</view>
</template>

<script>
export default {
 data() {
 return {
 name: "菜菜",
 btn: "",
 arr: [],
 }
 },
 methods: {
 set_btn() {
 this.btn = "爱了爱了",
 this.send_Get()
 },
 send_Get() {
 let _this = this
 uni.request({
 method: 'GET',
 url: 'https://api.jisuapi.com/todayhistory/query',
 data: {
 appkey: 'd1e87a8e45ba7749',
 month: 2,
 day: 18
 },
 success(res) {
 console.log(res.data)
 console.log(res.data.result)
 _this.arr = res.data.result
 },
 })
 }
 },
 onPullDownRefresh() {
 console.log("刷新了")
 },
 onReachBottom() {
 console.log("触底了")
 }
}
</script>

<style>
.box {
 width: 200px;
 height: 200px;
 background: #007AFF;
}

.box-active {
 background: red;
}

.box1 {
 width: 100px;
 height: 100px;
 background: #4CD964;
}

.box1-active {
 background: white;
}

.gogogo {
 margin: 30px auto;
 /* padding: 50px 30px; */
}
</style></pre>
</div>
  
来源：https://www.cnblogs.com/fwjlucifinil/p/13571107.html

頁: [1]

琼殿技术论坛's Archiver

uni-app-网络请求