Promise封装微信HTTP请求，解决微信小程序异步请求

微信小程序的默认请求方式都是异步请求，这样就会导致在请求还没有执行完毕后，后边的方法直接执行了；

我们可以通过请求成功后在进行下方的操作，例如：

onload: function () {
    
    
  wx.request({
    
    
    url: 'https://api',  // 某个api接口地址
    success: res => {
    
    
      // 把接下来需要执行的方法写入到这里
      console.log('接下来要执行的方法')
    }
  })
}

以上写法虽然可以，但是如果后续操作过多就会陷入无限的回调中，这样就会导致代码量非常膨大，不易于后期的维护；

如何解决呢？我们这里可以采用es6的新特征Promise对小程序的默认请求进行封装；

第一步：在通用util.js文件中封装wx.request请求；

let http ={
    
    
  post: function (url, data) {
    
    
    var postpromise = new Promise(function (postsuccess, postfail) {
    
    
      wx.request({
    
    
        header: {
    
     'content-type': 'application/x-www-form-urlencoded' },
        url: url,
        data: data,
        method: "POST",
        success: function (res) {
    
    
          postsuccess(res);
        },
        fail: (res) => {
    
    
          postfail(res);
        }
      })
    })
    return postpromise;
  },
  //get请求
  get: function (url, data) {
    
    
    var postpromise = new Promise(function (getsuccess, getfail) {
    
    
      wx.request({
    
    
        header: {
    
     'content-type': 'application/json' },
        url: url,
        data: data,
        method: "GET",
        success: function (res) {
    
    
          getsuccess(res);
        },
        fail: (res) => {
    
    
          getfail(res);
        }
      })
    })
    return postpromise;
  },
}

第二步：在对应的页面进行调用

var util = require('../../util.js');//首先引入通用文件
onLoad: function () {
    
    
	//url为项目中的请求地址,data为项目中的请求参数
	api.http.get(url,data ).then((res) => {
    
    
     console.log(res);//成功
    }).catch((res) => {
    
     console.log(res);//错误 })
    //在当前请求完成后执行回调方法
    .then(res=>{
    
    console.log('请求完成后的回调')})
}
//

以上就是针对微信小程序异步请求的封装方法，目前是分开封装的，如果个人有兴趣可以将post和get请求封装到一起，将method和header都改成变量即可！！