微信小程序开发笔记之wx.request()的坑——将服务器返回的数据及时显示到视图层

最新推荐文章于 2024-07-14 21:02:21 发布

po破小孩

最新推荐文章于 2024-07-14 21:02:21 发布

阅读量1.2w

点赞数 7

CC 4.0 BY-SA版权

分类专栏：微信开发

本文链接：https://blog.youkuaiyun.com/qq_37063860/article/details/79099474

微信开发专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了微信小程序中使用wx.request()进行网络请求时遇到的问题及解决方法，特别是如何正确处理异步请求并在页面加载完成后显示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期开发微信小程序涉及到wx.request()网络请求，原代码为：

// pages/index/home.js
var temp_data ;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    items:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 页面初始化后发出新的请求
    
    wx.request({
      url: "http://2327.free.ngrok.cc/Note_api/plist",
      data: {
        "token": getApp().globalData.userInfo.dev_token,
        "usertoken": wx.getStorageSync("usertoken")
      },
      method: "POST",
      header: {
        "content-type": "application/x-www-form-urlencoded"
      },
      success: function(res){
       
        if(res.data.status == 1){
          temp_data = res.data.diaryDatas;
          
        }else{
          wx.showToast({
            title: res.data.message,
            icon: "loading",
            duration: 2000
          })
        }
      }
    })
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //页面渲染完成
    this.setData({
      items: temp_data
    })

  }
})

本想在onLoad()函数中获取数据，在onReady()函数中设置刷新数据，结果控制台打印的信息却是 undefined，，

items并没有被赋值，什么原因呢？一开始以为是服务器返回的值不符合json数据格式，后来证明没问题。然后分别打印success()函数中的数据和onReady()函数数据，发现程序先执行了success函数

事实是onLoad函数先执行，之后执行onReady函数，这里可能是由于wx.request(）是多线程网络请求，所以造成了数据不统一，即赋值给items的temp_data是初始值，并没有将服务器返回的数据赋值给他，

后来改为：

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 页面初始化后发出新的请求
    var me = this;
    wx.request({
      url: "http://2327.free.ngrok.cc/Note_api/plist",
      data: {
        "token": getApp().globalData.userInfo.dev_token,
        "usertoken": wx.getStorageSync("usertoken")
      },
      method: "POST",
      header: {
        "content-type": "application/x-www-form-urlencoded"
      },
      success: function(res){
       
        if(res.data.status == 1){
          temp_data = res.data.diaryDatas;
          console.log(temp_data);
          
          me.setData({
            items: temp_data
          })
          console.log(me.data.items);
        }else{
          wx.showToast({
            title: res.data.message,
            icon: "loading",
            duration: 2000
          })
        }
      }
    })
  },

这里注意的是，在success函数中调用this.setdata()函数时，不能直接用this调用，应该是在success函数中this指代意义不同，所以将this赋值给me，用me调用，否则会报如图错误。