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


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 相关文章推荐
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
js数组的操作指南
Dec 28 Javascript
jquery实现图片预加载
Dec 25 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
浅谈JS运算符&&和|| 及其优先级
Aug 10 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 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
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
JS常用正则表达式总结
2013/11/12 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
微信小程序入门教程
2016/11/18 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
使用EduBlock轻松学习Python编程
2018/10/08 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
python用for循环求和的方法总结
2019/07/08 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
python 动态绘制爱心的示例
2020/09/27 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
安全施工责任书
2014/08/25 职场文书
欠条格式范本
2015/07/03 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
Python 键盘事件详解
2021/11/11 Python
Python开发五子棋小游戏
2022/05/02 Python