捷报 發表於 2021-3-17 14:40:00

uni-app 网络请求

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

                &lt;button @click="get()"&gt;点击发送get请求&lt;/button&gt;
        &lt;/view&gt;
&lt;/template&gt;

&lt;script&gt;
        export default {
                methods: {
                        get() {
                                uni.request({
                                        url: "http://www.my.com/test520",
                                        success(res) {
                                                console.log(res)
                                        }
                                })
                        }
                }
        }
&lt;/script&gt;
&lt;style&gt;
&lt;/style&gt;
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210317144018525-849622441.png" alt="image-20210317143720748" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/makalochen/p/14549263.html
頁: [1]
查看完整版本: uni-app 网络请求