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的更多相关文章

  1. 微信小程序wx.request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  2. 监控微信小程序wx.request请求失败

    在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...

  3. 微信小程序wx.request请求用POST后台得不到传递数据

    微信小程序的wx.request请求,method设为POST并向后台传递数据,但从后台返回的信息来看后台并没有获得传递的数据 wx.request({              url: 'url' ...

  4. 坑:微信小程序wx.request和wx.uploadFile中传参数的区别

    微信小程序中通过组件<form>提交表单的时候,在js中通过e.detail.value得到所提交表单的json格式数据.一般提交表单我们都是通过wx.request请求,提交表单数据,通 ...

  5. 微信小程序wx.request请求服务器json数据并渲染到页面

    [原文出自]: https://blog.csdn.net/weixin_39927850/article/details/79766259 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更 ...

  6. 微信小程序- wx.request请求不到数据

    小程序官方文档手册 https://mp.weixin.qq.com/debug/wxadoc/dev/ 小程序开发问答社区 http://www.henkuai.com/forum.php wx.r ...

  7. 微信小程序wx.request的简单封装

    前言 之前写小程序,每次请求后台时都直接调用原生的API,wx.request,每次都要写url,data,回调函数等,正好前段时间,小程序项目需要添加新内容,趁此机会,做一个封装的请求工具,比较简单 ...

  8. 微信小程序wx.request POST获取不到数据解决办法

    get //发起请求     wx.request({       url: 'http://www.xiaochengxu.com/home/index/curd', //仅为示例,并非真实的接口地 ...

  9. 微信小程序 wx.request POST请求------中文乱码问题

    问题: 一个简单的表单,提交后台返回数据“提交成功”. 以为没问题了,但是没过多久后台小哥就问为啥那么多乱码,找了很久原因,发现在提交的时候就已经乱码了. 嗯,前端问题,然后测试GET/POST方法. ...

随机推荐

  1. TTL与非门电路的工作原理

    分立元件门电路虽然结构简单,但是存在着体积大.工作可靠性差.工作速度慢等许多缺点.1961年美国德克萨斯仪器公司率先将数字电路的元器件和连线制作在同一硅片上,制成了集成电路.由于集成电路体积小.质量轻 ...

  2. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165335

    一.资源下载以及工具安装 1.下载虚拟机工具VMware. 下载链接 :https://www.baidu.com/link?url=uuaBW5ETUl3GrhUKvPbbEc7QlQvGHfpD8 ...

  3. rpm包与 yum 安装与卸载

    rpm包的安装:      1.安装一个包 # rpm -ivh 2.升级一个包 # rpm -Uvh 3.移走一个包 # rpm -e 4.安装参数 --force 即使覆盖属于其它包的文件也强迫安 ...

  4. 5.1JAVA基础复习——JAVA中的静态代码块、构造代码块、构造函数、局部代码块区别

    构造代码块: 在类中定义可以给所有对象进行初始化.局部代码块: 在方法中定义属性的生命周期.静态代码块: 在类中定义用于给类调用时属性的初始化 构造函数与构造代码块的区别: 构造函数是给对应的对象进行 ...

  5. 使用aspx 直接生成excel

    <%@ Page Language="C#" EnableEventValidation="false" ResponseEncoding="g ...

  6. ametuer technology

    1. eclipse build output/ .s37 not big enough (about 1.23M) Brose Setting: Build command must be BUIL ...

  7. 微博Rss邮箱推送系统

    微博Rss邮箱推送

  8. day10函数,函数的使用,函数的分类,函数的返回值

    函数 # ***** # 函数:完成 特定 功能的代码块,作为一个整体,对其进行特定的命名,该名字就代表函数 # -- 现实中:很多问题要通过一些工具进行处理 => 可以将工具提前生产出来并命名 ...

  9. JS经典面试题汉诺塔

    我爱撸码,撸码使我感到快乐!大家好我是Counter.今天给大家分享的是利用JS将汉诺塔原理实现出来,其实主要是考察一个递归的思想,复杂的问题简单化,汉诺塔应该都知道吧,具体的游戏规则,可以百度查查, ...

  10. 【FJOI 20170305】省选模拟赛

    题面被改成了个猪... T1猪猪划船(boat) [题目描述] 6只可爱的猪猪们一起旅游,其中有3只大猪A,B,C,他们的孩子为3只小猪a,b,c.由于猪猪们十分凶残,如果小猪在没有父母监护的情况下, ...