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


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中操控hidden、disable等无值属性的方法
Jan 06 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
Javascript动画效果(3)
Oct 11 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
js实现计时器秒表功能
Dec 16 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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基础学习之变量的使用
2011/06/09 PHP
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
2011/07/26 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
在Python中使用Neo4j的方法
2019/03/14 Python
python os.rename实例用法详解
2020/12/06 Python
Python操作Excel的学习笔记
2021/02/18 Python
python链表类中获取元素实例方法
2021/02/23 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
销售辞职报告范文
2014/01/12 职场文书
清洁工个人总结
2015/03/04 职场文书
在Python中如何使用yield
2021/06/07 Python
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android