使用Promise 封装微信小程序 wx.request()

1. 在微信小程序的utils 包中创建文件requestUtil.js，此文件主要用于小程序对外发起请求的工具。

//请求地址的前缀
const baseUrl="http://127.0.0.1:8081"
//请求头
var defalutHeader = { 'content-type': 'application/x-www-form-urlencoded' }

//request对象，其中有post和get两个属性对应 wx.request的POST和GET请求。
var request={
    post:function(url,param){
        return new Promise(function (resolve, reject) {
            wx.request({
                header: defalutHeader,
                url: baseUrl + url,
                data: param,
                method: "POST",
                success: function (res) {
                    if(res.data.code==20000){                        
                        resolve(res);
                        //reject(res);
                    }else{
                        reject(res);
                    }
                },
                fail: (res) => {
                    reject(res);
                }
            })    
        })
    },
    get:function(url,param){
        return new Promise(function (resolve, reject) {
            wx.request({
                header: defalutHeader,
                url: baseUrl + url,
                data: param,
                method: "GET",
                success: function (res) {
                    resolve(sres);
                },
                fail: (res) => {
                    reject(res);
                }
            })    
        })
    }
}
module.exports.request = request  //向外暴露request  对象

目录结构如下图：

2. 在page目录下定义一个api文件夹，其中用于存放请求到后台的各种接口对应的js文件。如下：

3. 在此假设后台有个可以访问的接口叫做venueCategoryApi，在api目录下创建一个js文件与之对应，venueCategoryApi.js,该js文件专门用于定义调用对应接口的方法，假设venueCategoryApi接口中提供有个**findAll()**的方法调用，则js如下：

//引入封装的工具requestUtil。
const http = require('../../utils/requestUtil.js')  

//声明与后台接口对应的findAll方法，参数venueCategoryName为传给后台接口的参数。
function findAll(venueCategoryName){
    var param={};
    if (venueCategoryName!=null && venueCategoryName !="") param['venueCategoryName']=venueCategoryName
    
    //调用封装的requestUtil中request对象中的post方法。此方法返回的是Promise对象。
    return http.request.post("/gymBooking/findAll",param);
    
}

//向外暴露方法。
module.exports={
    findAll:findAll
}

4. 在页面中调用venueCategoryApi.js中的findAll()方法。
   在页面中引入venueCategoryApi.js，然后调用**findAll()**方法.如下图