微信小程序 调用远程接口 给全局数组赋值代码实例


Posted in Javascript onAugust 13, 2019

关键是 let that = this

因为在onLoad 的 wx.request方法里, this指的是 wx.request 的上下文, 所以应该是在 onLoad 的时候定义 let that = this

调用远程服务,序列化后,把obj赋值给bookList

最开始的报错代码如下:

Page({
 data: {
  bookList: []
 },
 onLoad: function() {
  wx.request({
   url: 'https://jiashubing.cn/wechat/book',
   header: {
    'content-type': 'application/json'
   },
   success(res) {
    var obj = JSON.parse(res.data)
    console.log(obj)
    this.setData({
     bookList: obj
    })
   }
  })
 }
})

报错为:

VM3293:1 thirdScriptError
Cannot read property 'setData' of null;at pages/index/index onLoad function;at api request success callback function
TypeError: Cannot read property 'setData' of null

报错原因是this 指向有问题,得在onload的时保存实例指向,let that = this,下面全用that,this指向永远值得是自己的上下文环境

正确代码如下:

Page({
 data: {
  bookList: []
 },
 onLoad: function() {
  let that = this
  wx.request({
   url: 'https://jiashubing.cn/wechat/book',
   header: {
    'content-type': 'application/json'
   },
   success(res) {
    var obj = JSON.parse(res.data)
    console.log(obj)
    that.setData({
     bookList: obj
    })
   }
  })
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
react MPA 多页配置详解
Oct 18 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
基于redis的小程序登录实现方法流程分析
May 25 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
vue源码nextTick使用及原理解析
Aug 13 #Javascript
封装微信小程序http拦截器过程解析
Aug 13 #Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 #Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 #Javascript
node删除、复制文件或文件夹示例代码
Aug 13 #Javascript
vue实现下拉加载其实没那么复杂
Aug 13 #Javascript
vue中created和mounted的区别浅析
Aug 13 #Javascript
You might like
博士208HAF收音机实习报告
2021/03/02 无线电
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
JS实现div居中示例
2014/04/17 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
老生常谈js数据类型
2017/08/03 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
Python 探针的实现原理
2016/04/23 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
科级干部考察材料
2014/02/15 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
合作协议书模板2014
2014/09/26 职场文书
防暑降温通知书
2015/04/27 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
靠谱的活动总结
2019/04/16 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android