微信小程序 异步转同步,promise,for循环加request异步解决方案

问题:在使用for循环的同时,在内部使用wx.request发送get或者post请求,会导致异步请求存储数据。由于我对微信小程序的应用不是很熟练,并且微信小程序并不像vue那么好使。所以使用异步转同步的方式解决问题。
方案:
1,创建两个数组,这里分别是 user 和userHead

  data: {
    hotData: [],
    userHead: [],
    user: []
  },

2,在methods中创建两个方法getRoomList和getUserHead
其中getRoomList是请求第一组数据,该数据是异步一次性获取,而getUserHead是在getRoomList请求完成之后触发函数调用。

getRoomlist() {
      wx.request({
        url: 'http://127.0.0.1:3000/x/web-interface/ranking',
        data: {
          rid: 119,
          day: 3
        },
        method: 'GET',
        success: (res) => {
          wx.stopPullDownRefresh();
          console.log(res);
          this.setData({
            hotData: res.data.data.list,
          });
          console.log(this.data.hotData)
          this.getUserHead();
        }
      });
    },
    getUserHead() {
      // 获取用户头像  使用异步转同步的方法
      for (let i = 0; i < this.data.hotData.length; i++) {
        let s = new Promise((resolve, reject) => {
          wx.request({
            url: 'http://127.0.0.1:3000/x/web-interface/userid',
            method: 'GET',
            data: {
              uid: this.data.hotData[i].mid
            },
            method: 'GET',
            success(res) {
              resolve(res.data.data.card.face)
            },
            fail(err) {
              reject(err)
            }
          })
        });
        this.data.userHead.push(s);
        this.setData({
          userHead: this.data.userHead,
        });
      };
      this.data.user.length = this.data.userHead.length;
      for (let j = 0; j < this.data.userHead.length;j++){
        this.data.userHead[j].then(v=>{
          this.data.user[j] = v;
          this.setData({
            user: this.data.user,
          });
        })
      }
    }

3,getUserHead方法,将异步获取的数据转化为同步获取,这样数据的index值所对应的数据不会出错

第一步:通过for循环和wx.request获取数据**(此时已经出错,我发现请求的数据的index与原来的数据index值不匹配)**,

第二步:解决不匹配问题,上网查询得知使用promise

for (let i = 0; i < this.data.hotData.length; i++) {
        let s = new Promise((resolve, reject) => {
          wx.request({
            url: 'http://127.0.0.1:3000/x/web-interface/userid',
            method: 'GET',
            data: {
              uid: this.data.hotData[i].mid
            },
            method: 'GET',
            success(res) {
              resolve(res.data.data.card.face)
            },
            fail(err) {
              reject(err)
            }
          })
        });
    }

通过在控制台打印可以看出s是一个promise类型的数据,通过网上搜索得知,promise类型内的数据并不能直接获取,必须通过then()才可以拿到数据。于是我将所有同步获取的数据存入userHead数组内。

for (let i = 0; i < this.data.hotData.length; i++) {
        let s = new Promise((resolve, reject) => {
          wx.request({
            url: 'http://127.0.0.1:3000/x/web-interface/userid',
            method: 'GET',
            data: {
              uid: this.data.hotData[i].mid
            },
            method: 'GET',
            success(res) {
              resolve(res.data.data.card.face)
            },
            fail(err) {
              reject(err)
            }
          })
        });
        this.data.userHead.push(s);
        this.setData({
          userHead: this.data.userHead,
        });
      };

this.data.userHead.push(s);
this.setData({
userHead: this.data.userHead,
});

存入之后发现无法直接调用,尝试之后,利用for循环加then()方法来解析

this.data.user.length = this.data.userHead.length;
      for (let j = 0; j < this.data.userHead.length;j++){
        this.data.userHead[j].then(v=>{
          this.data.user[j] = v;
          this.setData({
            user: this.data.user,
          });
        })
      }

之后就可以拿到同步的数据了。

你可能感兴趣的:(前端,微信小程序)