关键是 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. oracle 排序后分页查询

    demo: select * from ( select * from DEV_REG_CFG_CAMERA where 1 = 1 order by unid asc) where rownum & ...

  2. 关于mybaits的注解@Param

    一.含义 @param作为dao层的注解,为了解决多个参数时,参数类型不一致的问题. <select id="findEmpById" resultType="co ...

  3. H3C 802.11e 协议

  4. 【Git】Git如何合并某一次commit的内容到指定分支

    一.我是在什么场景下会用到该Git操作 当某同事,将开发分支dev2合并到开发分支dev1时(两个不同的功能,不能合并),其他同事不知情的情况下,继续在dev1上开发并提交了代码. 后面发现了该合并, ...

  5. Linux中怎么升级PHP

    推荐yum源安装: #查看 删除老php版本的源 yum list installed | grep php yum remove php.x86_64 php-cli.x86_64 php-comm ...

  6. 逆向破解之160个CrackMe —— 015

    CrackMe —— 015 160 CrackMe 是比较适合新手学习逆向破解的CrackMe的一个集合一共160个待逆向破解的程序 CrackMe:它们都是一些公开给别人尝试破解的小程序,制作 c ...

  7. 编程题:SaturdayNightStay

    "输入2019年的一个时间段,开始时间代表出发,结束时间代表在那一天返回,判断在该时间段内,如果旅行有多少个子时间段可以在周六晚上休息" * 周六晚上休息,即子时间段必须包含周六, ...

  8. SpringDataJPA开发环境的搭建

    这里简单的介绍一下使用maven工程创建SpringDataJPA的开发环境的搭建 首先引入依赖 <dependencies> <!-- junit单元测试 --> <d ...

  9. 配置/更改vue项目中的资源路径

    打开 build/webpack.base.conf.js  ,在module.exports .resolve.alias下自定义: alias: { 'vue$': 'vue/dist/vue.e ...

  10. 爬虫-retrying用法

    文档:https://pypi.org/project/retrying/ 安装 pip install retrying 设置最大重试次数 # coding=utf-8 import request ...