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

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

阅读量：757 次

发布时间：2019-03-23

本文共 1329 字，大约阅读时间需要 4 分钟。

如何解决异步数据请求导致的渲染问题？

在小程序开发中，当我们使用异步数据请求时，由于 wx:for 渲染会在数据请求完成后才触发，可能会出现数据未完全渲染的情况。这种情况尤其容易发生在需要获取大量数据的场景中。以下将详细介绍如何解决这个问题。

问题分析

异步数据请求：当我们使用 wx.request 或类似方法发起异步数据请求时，程序会立即进入数据处理流程，同时继续执行后续代码。

渲染顺序问题：在 wx:for 渲染时，如果此时正在进行异步数据请求，可能会导致渲染过程在数据加载前就已经开始。这会使得渲染完成后的数据无法及时反映到列表中。

解决方法

方法一：使用 Promise（推荐）

Promise 是处理异步操作的一种更高效的方式，可以帮助我们将耗时较长的数据请求操作包裹起来，并在数据请求完成后进行处理。以下是对 Promise 的实现步骤：

创建文件结构

在小程序的根目录下新建 request 文件夹，并在其中创建 request.js 文件。

定义 Promise 请求函数

将 request.js 中的代码定义为一个函数，返回一个 Promise 对象。

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

引入文件

在需要使用数据请求的文件中引入 request.js。

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

在组件中使用 Promise

// 示例数据获取逻辑
var member = [];
for (let i = 0; i < 3; i++) {
  const res = await request(这里写发送请求所需要的参数);
  member[i] = res.data.data;
}
this.setData({ member: member });

方法二：使用 setTimeout （不推荐）

虽然可以使用 setTimeout 方法来处理数据加载后的渲染，但这种方法不够理想，具体原因如下：

不确定的等待时间

我们无法确切知道数据加载需要多长时间，随之而来的不确定性会增加代码的复杂性。

示例代码

// 示例延迟处理
setTimeout(() => {
  this.setData({
    member: this.data.member
  });
}, 400);

优点：简单且能够解决简单场景下的渲染问题。

缺点：不能确保数据加载的时间，容易引入逻辑上的不确定性。

综合考虑，推荐使用 Promise 的解决方法，因为它不仅能够更好地处理异步操作，还能有效解决回调地狱问题。

转载地址：http://eppzk.baihongyu.com/

你可能感兴趣的文章