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


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 相关文章推荐
使用bootstrap3开发响应式网站
May 12 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 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
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
php实现微信企业转账功能
2018/10/02 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
Python创建系统目录的方法
2015/03/11 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python如何快速生成时间戳
2020/07/21 Python
css3的transition属性详解
2014/12/15 HTML / CSS
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python