关键是 let that = this

因为在onLoad 的 wx.request方法里, this指的是 wx.request 的上下文, 所以应该是在 onLoad 的时候定义 let that = this

调用远程服务,序列化后,把obj赋值给bookList

正确代码如下:

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
})
}
})
}
})

最开始的报错代码如下:

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指向永远值得是自己的上下文环境

原创文章,欢迎转载,转载请注明出处!

微信小程序 调用远程接口,给全局数组赋值的更多相关文章

  1. java微信小程序调用支付接口(转)

    简介:微信小程序支付这里的坑还是有的,所以提醒各位在编写的一定要注意!!! 1.首先呢,你需要准备openid,appid,还有申请微信支付后要设置一个32位的密钥,需要先生成一个sign,得到pre ...

  2. java微信小程序调用支付接口

    简介:微信小程序支付这里的坑还是有的,所以提醒各位在编写的一定要注意!!! 1.首先呢,你需要准备openid,appid,还有申请微信支付后要设置一个32位的密钥,需要先生成一个sign,得到pre ...

  3. 微信小程序调用api接口

    请求的第三方微信url大概有3种 1)$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appid&s ...

  4. 微信小程序调用后台接口+热点新闻滚动展示

    1.微信JS文件,发送请求调用:  //将返回接口数据,写入Page({data})里面 //获取热点新闻,这个也是写在onload:function(){//code)里面的 wx.request( ...

  5. 微信小程序通过api接口将json数据展现到小程序示例

    这篇文章主要介绍了微信小程序通过api接口将json数据展现到小程序示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧实现知乎客户端的一个重要知识前提就是,要知道怎么通过 ...

  6. 图解微信小程序---调用API操作步骤

    图解微信小程序---调用API操作步骤 什么是API API(Application Programming Interface,应用程序编程接口:是一些预先定义的函数,目的是提供应用程序与开发人员基 ...

  7. 微信小程序request(ajax)接口请求封装

    微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...

  8. 微信小程序wx.request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  9. 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用

    注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...

随机推荐

  1. sklearn中的KMeans算法

    1.聚类算法又叫做“无监督分类”,其目的是将数据划分成有意义或有用的组(或簇).这种划分可以基于我们的业务需求或建模需求来完成,也可以单纯地帮助我们探索数据的自然结构和分布. 2.KMeans算法将一 ...

  2. Java实现简易聊天室

    Java实现简易聊天室 在学习<Java从入门到精通>这本书,网络通信,基于TCP实现的简易聊天室,我这里对书中的代码略做了修改,做个记录. 这里先放一下运行效果图,代码放在最后. 运行效 ...

  3. 动态路由 RIP

    不同网段之间进行通信,中间有多个路由器的情况下,我们可以通过配置RIP动态路由来实现数据转发. 实验拓扑 如图所示连接,地址规划如下: 名称 接口 IP地址 R1 f0/0 192.168.10.1/ ...

  4. Spring5.0.x SSM项目中Json转换器 的配置

    json作为前后端交互的重要手段,在springMVC中有自带的转换器可以免去平时那些繁琐的事情: pom文件添加:spring5.0以上用Jackson2.9以上的版本 <dependency ...

  5. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  6. css 布局 flex

    cursor 设置鼠标放上去后的形状 visability 设置是否可见 flex 详见这篇文章https://developer.mozilla.org/zh-CN/docs/Learn/CSS/C ...

  7. 洛谷P3069 [USACO13JAN]牛的阵容Cow Lineup(尺取法)

    思路 考虑比较朴素的解法,枚举每个长度为\(k+1\)的区间,然后统计区间中出现次数最多的颜色.这样的话复杂度为\(O(n*k)\)的,显然不行. 观察到统计每个区间中出现次数最多的颜色中,可以只用看 ...

  8. Linux 下 svn 多个项目多用户分配

    安装步骤如下: 1.yum install subversion 2.输入rpm -ql subversion查看安装位置,如下图: 输入 svn –help可以查看svn的使用方法 需求 开发服务器 ...

  9. xargs的用法

    处理带有空格的文件名 #我们创建了3个日志文件, 且故意让文件名称中都含有空格 [roc@roclinux ~]$ ;i<;i++)); do touch "test ${i}.log ...

  10. 18、Python模块基础

    一.模块 模块可以看成是一堆函数的集合体. 一个py文件内部就可以放一堆函数,因此一个py文件就可以看成一个模块. 如果这个py文件的文件名为module.py,模块名则是module. 1.模块的四 ...