微信小程序 wx.request
onLoad: function () {
var that = this
console.log('https://free-api.heweather.com/s6/weather?location=' + curCity + '&key=fd29112697d54606bd9499e54b05cf1d',)
wx.request({
url: 'https://free-api.heweather.com/s6/weather?location='+curCity+'&key=fd29112697d54606bd9499e54b05cf1d',
headers: {
'Content-Type': 'application/json'
},
success: function (res) {
that.setData({
now_weather: res.data.HeWeather6[0].now.tmp,
now_cond: res.data.HeWeather6[0].now.cond_txt,
high_tmp: res.data.HeWeather6[0].daily_forecast[0].tmp_max,
low_tmp: res.data.HeWeather6[0].daily_forecast[0].tmp_min,
for_array: res.data.HeWeather6[0].daily_forecast,
result: 1,
jsonData: JSON.stringify(res.data.HeWeather6[0].daily_forecast)
})}
},
)},
这是微信小程序中最经常使用的request请求,一般都是直接在success中设置相关前台参数。如果想要用从接口中获取的数据和本地数据拼凑成数组或者前台对象等,那么就需要等到通过网络通信获得json后解析并拼凑
但是,由于request请求和其他function是异步的,即request还未执行完就会执行其他function,导致数据在渲染的时候无法获取到正确的,所以针对这个问题,有一个看起来很笨的办法:
onLoad: function () {
curCity = app.globalData.selectedCity
var that = this
setImage()
console.log(curCity)
var times = setInterval(function () {
if (result) {
console.log(jsonData)
for (var i = 0; i < 8; i++) {
var object1 = new Object();
var json = JSON.parse(jsonData);
// console.log(json)
object1.index = json[i].type
object1.brf = json[i].brf
object1.txt = json[i].txt
object1.img = list2[i]
list[i] = object1
//console.log(i)
//console.log(list[i])
console.log(list[i].img)
}
var json2 = JSON.parse(sunJson);
console.log(json2)
forsr = json2.sr
forss = json2.ss
console.log(json2)
clearTimeout(times);//清除计数器
}
that.setData({
for_array: list,
for_sr:forsr,
for_ss:forss
})
},
)
},
})
function setImage() {
var that = this
wx.request({
url: 'https://free-api.heweather.com/s6/weather?location='+curCity+'&key=fd29112697d54606bd9499e54b05cf1d',
headers: {
'Content-Type': 'application/json'
},
success: function (res) {
console.log(curCity)
/*that.setData({
now_weather: res.data.HeWeather6[0].now.tmp,
now_cond: res.data.HeWeather6[0].now.cond_txt,
high_tmp: res.data.HeWeather6[0].daily_forecast[0].tmp_max,
low_tmp: res.data.HeWeather6[0].daily_forecast[0].tmp_min,
for_array: res.data.HeWeather6[0].daily_forecast,
result: 1,
jsonData: JSON.stringify(res.data.HeWeather6[0].daily_forecast)
})*/
result = 1
jsonData = JSON.stringify(res.data.HeWeather6[0].lifestyle)
sunJson = JSON.stringify(res.data.HeWeather6[0].daily_forecast[0])
//console.log(jsonData)
//setImage()
}
})
}
在setimage方法中,进行网络连接,如何已经获取到了正确的数据,就把标志位result记为1;同时,在onload函数中,写一个记数循环,当检查到result为1时即证明数据已经获得,然后进行下一步操作。记数要记得及时清空,不然容易变成死循环
微信小程序 wx.request的更多相关文章
- 微信小程序wx.request接口
微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...
- 监控微信小程序wx.request请求失败
在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...
- 微信小程序wx.request请求用POST后台得不到传递数据
微信小程序的wx.request请求,method设为POST并向后台传递数据,但从后台返回的信息来看后台并没有获得传递的数据 wx.request({ url: 'url' ...
- 坑:微信小程序wx.request和wx.uploadFile中传参数的区别
微信小程序中通过组件<form>提交表单的时候,在js中通过e.detail.value得到所提交表单的json格式数据.一般提交表单我们都是通过wx.request请求,提交表单数据,通 ...
- 微信小程序wx.request请求服务器json数据并渲染到页面
[原文出自]: https://blog.csdn.net/weixin_39927850/article/details/79766259 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更 ...
- 微信小程序- wx.request请求不到数据
小程序官方文档手册 https://mp.weixin.qq.com/debug/wxadoc/dev/ 小程序开发问答社区 http://www.henkuai.com/forum.php wx.r ...
- 微信小程序wx.request的简单封装
前言 之前写小程序,每次请求后台时都直接调用原生的API,wx.request,每次都要写url,data,回调函数等,正好前段时间,小程序项目需要添加新内容,趁此机会,做一个封装的请求工具,比较简单 ...
- 微信小程序wx.request POST获取不到数据解决办法
get //发起请求 wx.request({ url: 'http://www.xiaochengxu.com/home/index/curd', //仅为示例,并非真实的接口地 ...
- 微信小程序 wx.request POST请求------中文乱码问题
问题: 一个简单的表单,提交后台返回数据“提交成功”. 以为没问题了,但是没过多久后台小哥就问为啥那么多乱码,找了很久原因,发现在提交的时候就已经乱码了. 嗯,前端问题,然后测试GET/POST方法. ...
随机推荐
- Can't find msguniq. Make sure you have GNU gettext tools 0.15 or newer installed
Python Django生成国际化和本地化.po文件步骤1.在settings文件中,添加一下内容: LANGUAGES = ( ('zh-hans', ugettext_lazy('Simplif ...
- SSM(Spring4.x.x+SpringMVC4.x.x+Mybatis3.4.x)框架整合
本文是参考SSM框架——详细整合教程(Spring+SpringMVC+MyBatis)修改而来的 一.环境 1. Myeclipse2016 2. Mysql 二.具体步骤 1. 整合Spring和 ...
- git 本地提交代码到 github 远程库,没有弹框 github login
git 本地提交代码到 github 远程库,没有弹框 github login: 原因: win10 有个凭据管理器,给保存了历史登陆用户名密码,导致无法切换用户. 解决办法: 删除历史登陆用户 ...
- spring源码解析2--容器的基本实现
spring的主要特性是IOC,实现IOC的关键是bean,而更关键的是如何bean的管理容器,也就是BeanFactory,本文的目标是弄清楚BeanFactory具体是怎么样的存在. 先看下最简单 ...
- 2018-2019-2 网络对抗技术 20165316 Exp4 恶意代码分析
2018-2019-2 网络对抗技术 20165316 Exp4 恶意代码分析 一.原理与实践说明 1.实践目标 监控你自己系统的运行状态,看有没有可疑的程序在运行. 分析一个恶意软件,就分析Exp2 ...
- activemq修改端口
1.修改TCP 61616端口 cd /apps/svr/activemq/conf cat activemq.xml |grep transportConnector <transportCo ...
- C++隐藏任务栏图标
在VC编程中,有时候我们需要将我们的程序在任务栏上的显示隐藏起来,我试过几种方法,下面我介绍一下我知道的三种方法. 第一种方法是设置窗口WS_EX_TOOLWINDOW扩展样式,通过在OnInitDi ...
- 如何在Github创建repository
第一步:登陆Github,点击new repository 第二步:输入相应内容创建 第三步,创建完成,如下.
- Hadoop-Impala学习笔记之入门
CDH quickstart vm包含了单节点的全套hadoop服务生态,可从https://www.cloudera.com/downloads/quickstart_vms/5-13.html下载 ...
- Python网络爬虫入门篇
1. 预备知识 学习者需要预先掌握Python的数字类型.字符串类型.分支.循环.函数.列表类型.字典类型.文件和第三方库使用等概念和编程方法. 2. Python爬虫基本流程 a. 发送请求 使用 ...