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


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 类定义的4种方法
Sep 12 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
Js获取事件对象代码
2010/08/05 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
白酒业务员岗位职责
2013/12/27 职场文书
检举信的格式及范文
2014/04/04 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
锅炉工岗位职责
2015/02/13 职场文书
安全保证书格式
2015/02/28 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书