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. 20175205 2018-2019-2 《Java程序设计》第五周学习总结

    20175205 2018-2019-2 <Java程序设计>第五周学习总结 教材学习内容总结 接口:使用关键字interface定义接口 接口声明:interface 接口名 接口体:接 ...

  2. python selenium web自动化测试完整项目实例

    问题: 好多想不到的地方,中间经历了一次重构,好蛋疼: xpath定位使用的不够熟练,好多定位问题,只能靠强制等待解决: 存在功能重复的方法,因为xpath定位不同,只能分开写,有时间可以继续优化: ...

  3. dos模式下切换电脑用户

    启用管理员运行dos 然后输入net user adminstrator /active.yes 然后点击打开按钮 就可以切换电脑用户了

  4. Linux CAN Shell 测试脚本程序

    2012-01-13 22:57:14 为我的开发板2440做二次开发,添加了can驱动,做了驱动测试程序,没理由不添加一个测试脚本程序啊!修改了测试程序,使应用程序更加灵活,添加了一下传递参数.接着 ...

  5. cxf整合spring中出现的错误

    Caused by: java.lang.ClassNotFoundException: javax.wsdl.extensions.ElementExtensible at org.apache.c ...

  6. 要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10;

    package text1; import java.util.ArrayList; import java.util.HashSet; /* * 要求产生10个随机的字符串, * 每一个字符串互相不 ...

  7. 【shell】shuf命令提取文件的随机行

    shuf命令可以随机提取一个文本文件的不同行,输出到文件或者标准输出中. shuf 用法: shuf [选项]... [文件] 或者: shuf -e [选项]... [参数]... 或者: shuf ...

  8. rsync如何不指定密码文件

    平时用rsync做数据同步时,都是通过--password-file指定一个密码文件 这个密码文件权限要求比较高,一般是600,属主属组都是rsync命令执行者 如果是在脚本中执行rsync,比如定时 ...

  9. AutoCAD LT 2019 安装教程

    autocad lt 2019是mac平台上一款全球领先的更快.更精确地创建二维图形设计平台,用于二维草图.图形和文档编制,广泛应用于机械设计.工业制图.工程制图.土木建筑.装饰装潢.服装加工等多个行 ...

  10. BZOJ 4195: [Noi2015]程序自动分析 并查集+离散化

    LUOGU 1955BZOJ 4195 题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3...代表程序中出现的变量 ...