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


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 jQuery中的DOM操作
Mar 21 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
jQuery手风琴的简单制作
May 12 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
webpack打包js文件及部署的实现方法
Dec 18 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 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/10/09 PHP
图书管理程序(二)
2006/10/09 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
创建js对象和js类的方法汇总
2014/12/24 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
tensorflow 环境变量设置方式
2020/02/06 Python
怎样创建、运行java程序
2014/08/01 面试题
课改先进个人汇报材料
2014/01/26 职场文书
出生公证委托书
2014/04/03 职场文书
个人求职自荐信范文
2014/06/20 职场文书
技术入股合作协议书
2014/10/07 职场文书
初中作文评语集锦
2014/12/25 职场文书
大雁塔导游词
2015/02/04 职场文书
检讨书范文
2019/04/16 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python