关键是 let that = this

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

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

正确代码如下:

  1. Page({
  2. data: {
  3. bookList: []
  4. },
  5.  
  6. onLoad: function() {
  7. let that = this
  8. wx.request({
  9. url: 'https://jiashubing.cn/wechat/book',
  10. header: {
  11. 'content-type': 'application/json'
  12. },
  13. success(res) {
  14. var obj = JSON.parse(res.data)
  15. console.log(obj)
  16. that.setData({
  17. bookList: obj
  18. })
  19. }
  20. })
  21. }
  22. })

最开始的报错代码如下:

  1. Page({
  2. data: {
  3. bookList: []
  4. },
  5.  
  6. onLoad: function() {
  7. wx.request({
  8. url: 'https://jiashubing.cn/wechat/book',
  9. header: {
  10. 'content-type': 'application/json'
  11. },
  12. success(res) {
  13. var obj = JSON.parse(res.data)
  14. console.log(obj)
  15. this.setData({
  16. bookList: obj
  17. })
  18. }
  19. })
  20. }
  21. })

报错为:

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. Es查询工具使用

    Kibana按照索引过滤数据 1.创建索引模式 2.查询索引中的数据 Es查询不返回数据 创建索引的时候指定mapping mappings={ "mappings": { &qu ...

  2. vue响应式原理,去掉优化,只看核心

    Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...

  3. 【爬虫】Condition版的生产者和消费者模式

    Condition版的生产者和消费者模式 threading.Condition 在没有数据的时候处于阻塞状态,有数据可以使用notify的函数通知等等待状态的线程运作 threading.Condi ...

  4. vue-cli配置移动端自适应flexible.js

    第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible npm install lib-flexible --save-dev 二.在项目入口文件main.js中引入li ...

  5. fork以后子进程输出cout无法输出

    fork以后子进程输出cout无法输出 fork以后子进程输出cout无法输出 子进程 fork  cout<<"sdfsf"<<endl; 内容无法输出控 ...

  6. DT系统开发之-在线询盘信息的调取实现

    调用标签 <!--{tag("table=message&condition=status=3 and typeid=1&areaid=$cityid&cati ...

  7. 利用 subst.exe 可以将任意文件夹映射成盘符:

    subst命令:将路径与驱动器号关联,即将一个目录当做一个磁盘驱动器来看: 假设:将E:\下的baidu文件夹设置成虚拟盘,虚拟盘的盘符为M. 1.点开始按钮,在运行框里输入 subst m: E:\ ...

  8. call和apply的模拟实现

    call 一句话介绍 call: call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法. 举个例子: var foo = { value: 1 }; func ...

  9. spring相关—AOP编程—切入点、连接点

    1 切入点表达式 1.1 作用 通过表达式的方式定位一个或多个具体的连接点. 1.2 语法细节 ①切入点表达式的语法格式 execution([权限修饰符] [返回值类型] [简单类名/全类名] [方 ...

  10. K-string HDU - 4641 (后缀自动机)

    K-string \[ Time Limit: 2000 ms\quad Memory Limit: 131072 kB \] 题意 给出长度为 \(n\) 的字符串,接下来跟着 \(m\) 次操作, ...