微信小程序 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方法. ...
随机推荐
- python数据科学 学习之路
week1 - Python基础1 介绍.基本语法.流程控制 week1- Python基础2 列表.字典.集合 week1- Python基础3 函数.递归.内置函数 week1- Pyt ...
- cshtml razor
禁止转换字符 @(Html.Raw(@item.conent)) 三目运算 @(ViewBag.submitType==1?"blue":"")
- 单片机C语言基础编程源码六则
1.某单片机系统的P2口接一数模转换器DAC0832输出模拟量,现在要求从DAC0832输出连续的三角波,实现的方法是从P2口连续输出按照三角波变化的数值,从0开始逐渐增大,到某一最大值后逐渐减小,直 ...
- 记录ok6410 jlink 命令行调试uboot
1\启动ok6410 进入uboot命令行 2\启动JLinkGDBServer -device ARM11 3\arm-none-eabi-gdb u-boot 初始化脚本 # Connect to ...
- decimal(19,6)什么意思
decimal(19,6)什么意思 数字长度19位,精确到小数点后6位例如0.123456 mysql中varchar(50)最多能存多少个汉字 首先要确定mysql版本4.0版本以下,varchar ...
- random模块、time模块、sys模块、os模块
一.random模块 1.随机取小数 (数学计算) print(random.random()) #取0-1之间的小数 print(random.uniform(3,6)) #uniform( ...
- Redis的持久化
Redis的持久化有两种方式: RDB方式(默认支持):在指定的时间间隔内将内存中的数据集快照写入磁盘 优势 整个Redis数据库将只包含一个文件,对于文件备份来说是完美的,系统出现灾难性的故障时容易 ...
- First Python script
learn what is api Jailbreak pycharm install requests on pycharm write first request: get, post MFA l ...
- springboot+thymeleaf+pageHelper带条件分页查询
html层 <div> <a class="num"><b th:text="'共 '+ ${result.resultMap['pages ...
- lnmp一键安装包安装失败,或者安装下载缓慢的解决办法
使用阿里云内网安装模块 阿里云外网: ftp://soft6.vpser.net/ 阿里云云内网:ftp://10.163.196.147 修改lnmp.conf 文件 目前可用的国内LNMP ful ...