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


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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
分享别人写的一个小型js框架
Aug 13 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
javascript修改图片src的方法
Jan 27 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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完整的日历类(CLASS)
2006/11/27 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
从零学jquery之如何使用回调函数
2014/05/16 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
浅谈javascript中的 “ && ” 和 “ || ”
2017/02/02 Javascript
深入理解vue中的$set
2017/06/01 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python 远程统计文件代码分享
2015/05/14 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
python实时监控cpu小工具
2018/06/21 Python
谈谈Python中的while循环语句
2019/03/10 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
由面试题加深对Django的认识理解
2019/07/19 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
信息部岗位职责
2013/11/12 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
通信研究生自荐信
2014/02/01 职场文书
初中班主任寄语
2014/04/04 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
学校党支部承诺书
2015/04/30 职场文书
太空授课观后感
2015/06/17 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
如何利用pygame实现打飞机小游戏
2021/05/30 Python
Python软件包安装的三种常见方法
2022/07/07 Python