关于微信小程序request请求获取大量信息时，wx:for渲染失败问题的解决

狴犴ys

于 2021-04-15 21:17:20 发布

阅读量1.8k

点赞数 3

分类专栏：微信小程序后台文章标签：小程序

本文链接：https://blog.youkuaiyun.com/weixin_51375107/article/details/115739859

版权

微信小程序同时被 2 个专栏收录

29 篇文章

订阅专栏

后台

20 篇文章

订阅专栏

当小程序中使用request请求大量数据时，由于请求的异步性可能导致数据未完全获取即开始渲染，从而引发渲染失败。推荐使用Promise对请求进行改造，使其同步并避免回调地狱。在request.js中导出Promise封装的request方法，然后在需要的地方引入并使用await关键字等待数据获取完成。另一种不推荐的方法是使用setTimeout，但这种方法依赖于预设的时间间隔，不够精确。

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

问题的原因

request请求是异步的，当有大量数据要获取时，数据还没有获取完，程序已经进行了wx:for的渲染，这时候我们还没有要获取的数据,这就会导致数据渲染失败

问题的解决

有两种解决办法

Promise(推荐)

Promise可以把请求改成同步的，并且还可以解决由于方法过多引起的回调地狱问题。因此我们推荐使用这种方法

先在程序根目录下创建一个request文件夹，然后创建js文件
request.js中的代码

export const request=(params)=>{
  return new Promise((resolve,reject)=>{
    wx.request({
      ...params,
      success: (result) => {
        resolve(result);
      },
      fail:(err)=>{
        reject(err);
      }
    })
  })
}

在我们的js文件中引入该文件(写到文件最上面)

import{request} from "../../../request/request.js";

通过promise发送request请求

var member=[];  
//获取成员信息
for(let i=0;i<3;i++){
  const res=await request(这里写发送请求所需要的参数);
  member[i]=res.data.data;
}
that.setData({
  member:member
})

setTimeout方法(不推荐)

使用小程序中的setTimeout方法，当wx:for渲染完成，并且数据获取到后，我们在对获取的数据进行刷新，让程序重新对wx:for渲染,这样就可以了

setTimeout(()=>{
      this.setData({
        member:this.data.member
      })
    },400)

由于我们并不知道什么时候数据会获取到，这就导致我们不能确定该让程序停止多少秒，因此这种方法并不推荐