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


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 相关文章推荐
jquery 选项卡效果 新手代码
Jul 08 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
使用Ajax实现无刷新上传文件
Apr 12 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
python 开发的三种运行模式详细介绍
2017/01/18 Python
Python同步遍历多个列表的示例
2019/02/19 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
会计岗位职责
2013/11/08 职场文书
基层党员对照检查材料
2014/08/25 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js