关于获取接口数据

关于获取接口数据

// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
 
 
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var list={}; 
    // 最近上映
    wx.request({
      url: 'http://t.yushu.im/v2/movie/coming_soon?star-0&count=10',
      success(res) {
        list.coming = {
          title: "最近上映",
          move:res
        }  
      }  
    })
    // 热门电影
    wx.request({
      url: 'http://t.yushu.im/v2/movie/coming_soon?star-0&count=10',
      success(res) {  
        list.theaters = {
          title: "热门电影",
        }
      }
    })
    // top250电影
    wx.request({
      url: 'http://t.yushu.im/v2/movie/coming_soon?star-0&count=10',
      success(res) {
        list.top250 = {
          title: "top250电影",
          move:res
        }
      }
    })
this.setData({
  dataList:list
})

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log(this.data.dataList);
    console.log(this.data.dataList.top250);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

请问下老师为什么打印不出来数据呢,使用wx:for渲染出来的是空白数据,(接口在关闭https合法验证的情况下是能正常获取数据的),需要怎么做修改呢?http://img1.sycdn.imooc.com//climg/5e8b5a8409da103105290173.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
好帮手慕星星 2020-04-08 09:54:56

同学你好,问题解答如下:

1、代码中并没有循环遍历获取的数据,所以是不会显示出来的。可以查看一下获取的数据

http://img1.sycdn.imooc.com//climg/5e8d2bf009516ffc10400308.jpg

一条数据为

http://img1.sycdn.imooc.com//climg/5e8d2d870999faeb13190449.jpg

请求的三个链接都是一样的,使用一个就好。例如:

http://img1.sycdn.imooc.com//climg/5e8d2dbd09d3b69207770424.jpghttp://img1.sycdn.imooc.com//climg/5e8d2dd009d5d00706840324.jpg效果

http://img1.sycdn.imooc.com//climg/5e8d2dd7095d30d906420691.jpg

2、按照上面修改之后data中设置的dataList为数组,可以输出看看,并且需要遍历才能输出具体的内容。

自己再试着写一写,祝学习愉快!

好帮手慕星星 2020-04-07 18:26:18

同学你好,因为获取数据是异步的,需要等到数据获取完再设置data,否则没有数据。可以放到最后一个请求中设置,如下

http://img1.sycdn.imooc.com//climg/5e8c5436092d2dd408210964.jpg

记得提前保存this的指向,否则不能使用setData方法。

另外页面中缺少闭合的标签,否则结构解析不正确,参考

http://img1.sycdn.imooc.com//climg/5e8c553c095c036f06890333.jpg

效果

http://img1.sycdn.imooc.com//climg/5e8c554409d7585302550222.jpg

自己再测试下,祝学习愉快!

  • 提问者 慕妹8172416 #1
    按照这样修改 title获取到了 但是接口获取到的内容还是无法渲染出来?怎么解决呢
    2020-04-07 19:33:31
  • 提问者 慕妹8172416 #2
    colsole.log(this.data.dataList)能正常打印出各项数据,但是打印每一项,例如console.log(this.data.dataList.coming)就打印出空对象
    2020-04-07 19:35:36
bbbboom 2020-04-07 10:34:23

你是怎么获取到数据的呀,我这边就会报错

http://img1.sycdn.imooc.com//climg/5e8be66f09c57ee506620066.jpg

在后台配置域名的时候只能是https开头的,不能是http 。

你这个链接直接在浏览器地址栏访问是可以的,但是通过request方法请求不到啊,你是怎么解决的。

  • 提问者 慕妹8172416 #1
    在设置里头,关闭https合法验证就可以,因为我这只是练习,关闭了无所谓,但是项目上线就不能关闭https合法验证
    2020-04-07 11:57:38
提问者 慕妹8172416 2020-04-07 00:41:29
<view class="container">
  <view class="list" wx:for="{{dataList}}"  wx:key="index">
    <view class="list-header">
      <view class="header-title">{{item.title}}</view>
      <view class="header-content">
        查看更多
       
      </view>
    </view>

这里是wxml页面中获取title的代码

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师