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


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 相关文章推荐
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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初学者头疼问题总结
2006/07/08 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
php实现mysql封装类示例
2014/05/07 PHP
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
python 获取文件列表(或是目录例表)
2009/03/25 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python获取邮件地址的方法
2015/07/10 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
中海讯通笔试题
2015/09/15 面试题
酒店实习个人鉴定
2013/12/07 职场文书
母婴店促销方案
2014/03/05 职场文书
投资合作协议书
2014/04/17 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
环境卫生整治简报
2015/07/20 职场文书
爱国教育主题班会
2015/08/14 职场文书
护士岗位竞聘书
2015/09/15 职场文书