【微信小程序】使用 wx.request 方法进行异步网络请求

在微信小程序中,你可以使用 wx.request 方法进行异步网络请求,并将获取到的列表数据渲染到 UI 上。

首先,在页面的 data 中定义一个数组变量,用于存储获取到的列表数据,例如:

Page({
    
    
  data: {
    
    
    listData: [] // 初始为空数组
  },
  // 其他页面代码...
})

然后,在页面的生命周期函数 onLoad 或需要触发网络请求的函数中,使用 wx.request 方法发送异步请求,并在回调函数中处理返回的数据,例如:

Page({
    
    
  data: {
    
    
    listData: []
  },
  onLoad: function() {
    
    
    // 发送异步请求
    wx.request({
    
    
      url: 'https://api.example.com/list', // 请求的接口地址
      method: 'GET', // 请求方法
      success: (res) => {
    
    
        // 请求成功,处理返回的数据
        const data = res.data;
        // 更新页面数据,将获取到的列表数据存储到 listData 变量中
        this.setData({
    
    
          listData: data
        });
      },
      fail: (err) => {
    
    
        // 请求失败,处理错误信息
        console.error(err);
      }
    });
  },
  // 其他页面代码...
})

接下来,在页面的 WXML 文件中,通过 wx:for 指令将 listData 数组中的每个元素渲染到 UI 上,例如:

<view>
  <block wx:for="{
     
     {listData}}" wx:key="index">
    <view>
      <!-- 渲染列表项的内容 -->
      <text>{
   
   {item.name}}</text>
    </view>
  </block>
</view>

在上面的代码中,wx:for 指令用于循环遍历 listData 数组的每个元素,通过 item 变量访问当前元素的属性(例如 name)并进行渲染。

这样,当页面加载时,会发送异步请求获取列表数据,并将数据渲染到 UI 上。请根据实际需求和接口返回的数据结构进行相应的修改。

猜你喜欢

转载自blog.csdn.net/gao511147456/article/details/131631985