uniAPP网络连接实现轮播图

uni.request(OBJECT)

发起网络请求。

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

OBJECT 参数说明

method 有效值

必须大写，有效值在不同平台差异说明不同。

success 返回参数说明

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 对象的方法列表

示例

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

Tips

• 请求的 header 中 content-type 默认为 application/json。
• 避免在 header 中使用中文，或者使用 encodeURIComponent 进行编码，否则在百度小程序报错。(来自：快狗打车前端团队)
• 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
• H5 端本地调试需注意跨域问题，参考：调试跨域问题解决方案
• 注意由于百度小程序iOS客户端，请求失败时会进入fail回调，需要针对百度增加相应的处理以解决该问题。
• 注意小程序端不支持自动保持 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数据，不含图片)，过多数据应分页获取，以提升应用体验。

用的是黑马程序员的 API接口：

• https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata

get 请求 。

我们在页面生命周期 onload 中 写：

所以我们下面要这样写：

注意 this 穿透 所以我设置了个me，详细看代码：

效果: