关键是 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. Qt 使用QLabel、QMovie加载gif图片实现动态等待窗口

    新建基于Widget的应用程序,在ui的窗口中添加QLabel,对象名label,调整整个窗口大小. 准备loading.gif图片  Widget.cpp  12345678910111213141 ...

  2. WPE 过滤器 滤镜 用法

    过滤所有数值匹配的数据包,并修改指定的bit位 打开游戏 打开WPE 附加游戏进程 选项配置 用来配置抓取发送和接收包类型 先抓取发送包,也就是游戏中主动发给服务器的包 点击开始抓包 输入喊话内容 分 ...

  3. NN入门

    参考资料:https://blog.csdn.net/kwame211/article/details/77337166, 仅作为个人学习笔记.人工智能的底层模型是"神经网络"(n ...

  4. 后缀表达式 Java实现

    基本原理: 从左到右扫描字符串:1.是操作数:压栈. 2.是操作符:出栈两个操作数,将运算结果压栈. 扫描字符串通过java.util.Scanner类实现,其next方法可以读取以空格(默认)或指定 ...

  5. Microsoft SQL Server 2012安装说明

    Microsoft SQL Server 2012安装说明 环境:Windows8, Windows7, WinVista, Win2003, WinXP Microsoft SQL Server 2 ...

  6. go中如何更好的迭代

    三种迭代方式 3 ways to iterate in Go 有如下三种迭代的写法: 回调函数方式迭代 通过Next()方法迭代.参照python 迭代器的概念,自定义Next()方法来迭代 通过ch ...

  7. Django 之restfromwork 源码---APIView 分析

    Django 之 djangorestframework的APIView分析 APIView 类中的as_view() 方法 首先 我们从视图函数入手,在urls.py 中的 URLconfig中添加 ...

  8. linux设备驱动程序--gpio控制

    gpio驱动程序 上一章节linux设备驱动程序--创建设备节点章节主要介绍了linux字符设备驱动程序的框架,从这一章节开始我们讲解各种外设的控制,包括gpio,i2c,dma等等,既然是外设,那就 ...

  9. .DS_Store文件是什么?Mac系统如何彻底清除该文件?

    用过Mac OS系统的都会注意到一个名为.DS_Store的隐藏文件,尤其是zip格式的压缩包解压的出来,会出现在各种文件夹内,非常烦人! 特别是把文件分享给使用windows的朋友的时候,这些文件会 ...

  10. loadrunner自动订票脚本通用;loadrunner脚本参数化,设置检查点

    Action() { web_reg_find("Text=Web Tours", LAST); web_reg_save_param("session", & ...