微信小程序 異步轉同步，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,
          });
        })
      }

之後就可以拿到同步的數據了。