微信小程序：封装wx.request同步请求

引入

在开发小程序的过程中，通过wx.request()对后端接口进行请求是不可避免的。

wx.request({
  url: 'http://localhost:8080/getTopTheme',
  method: 'GET',
  data: {},
  success: res => {
    this.setData({
      topThemeSrc: res.data.src
    })
  }
})

这是一段非常普通的请求接口的代码，感觉上来所是有点长的，并且在一个页面中有时并不只是请求一个接口，为了避免代码的重复编写，以至于难以维护。我们可以对其进行一些简单的封装。

封装异步请求

class Http {
    // 异步Http请求
    static request(url, method, data, backMethod) {
        wx.request({
            url: url,
            method: method,
            data: data,
            success: res => {
                backMethod(res)
            }
        })
    }
｝

封装同步请求

对于wx.request这个方法，我们想让这个异步请求变成同步请求直接使用await + async是没有效果的。因为await生效的条件是必须要有一个Promise的返回值，await的作用也就是获取Promise中的内容。在微信小程序中，大部分api都是不会返回Promise值的，所以我们直接设置await和async是没有效果的。

解决办法：

const promisic = function (func) {
  return function (params = {}) {
    return new Promise((resolve, reject) => {
      const args = Object.assign(params, {
        success: (res) => {
          resolve(res);
        },
        fail: (error) => {
          reject(error);
        }
      });
      func(args);
    });
  };
};

class Http {
    // 同步Http请求
    static async asyncRequest(url, method, data, backMethod) {
        let res = await promisic(wx.request)({
            url: url,
            method: method,
            data: data,
        })
        backMethod(res)
    }
}

测试

// ...
onLoad: async function (options) {
    let the = this
    
    // 1：执行3秒时间
    await Http.asyncRequest(
      'http://localhost:8080/getTopTheme',
      'GET', {},
      res => {
        console.log(res.data.src)
        the.setData({
          topThemeSrc1: res.data.src
        })
      }
    )

    // 2：在1执行3秒之后继续执行
    await Http.asyncRequest(
      'http://localhost:8080/getTopTheme',
      'GET', {},
      res => {
        console.log(res.data.src)
        this.setData({
          topThemeSrc2: res.data.src
        })
      }
    )
    
    
    // 3：
    Http.request(
      'http://localhost:8080/getTopTheme',
      'GET', {},
      res => {
        console.log(res.data.src)
        the.setData({
          topThemeSrc1: res.data.src
        })
      }
    )

    //:4：与3相继出现
    Http.request(
      'http://localhost:8080/getTopTheme',
      'GET', {},
      res => {
        console.log(res.data.src)
        this.setData({
          topThemeSrc2: res.data.src
        })
      }
    )
  },
// ...