如果你开发过微信小程序，那么你一定很熟悉wx.request()这个方法，它是用来发送HTTP请求的。本文将以微信小程序为基础，介绍为什么要封装请求，怎么封装请求以及封装后如何使用。

为什么要封装请求

首先，请看以下使用微信原生request请求所需要书写的代码

wx.request({
    url: "http://localhost:520/test",
    header: {
        "content-type": "application/json;charset=utf-8"
    },
    data: {
        code: 20
    },
    method: "GET",
    dataType: "json",
    responseType: "text",
    success: function (res) {
        this.setData({
            message: data.data[0].text
        })
    },
    fail: function (res) {
        console.log(err)
    }
})

再看看封装之后的

var params = { code: 520 };
util.$post(api.test, params , (err, data) => {
    if (err) {
        console.log(err)
    } else {
        this.setData({
            message: data.data[0].text
        })
    }
})

看到这里，你应该已经认识到了封装的好处之一了——代码更加实用。其实，封装带来的好处不仅于此，假设你正在开发一个大型微信小程序项目，那么你需要开发很多动态页面，每个动态页面要发好几次甚至十几次请求。如果你一次性完事了，那还没怎么，顶多就是代码重复率有点高，但是，倘若你服务器地址发生了变化（比如项目上线），那么你就需要找到每个发请求的地方，去修改地址，这是最头疼的。

怎么封装请求

其实微信小程序的内置请求方法和jQuery的Ajax请求方法及其相似，我是在使用NodeJS搭建服务器的时候，以及使用axios之后，总结出这个方法的，正如你刚才看过的封装之后的代码，它有点相似于node的mysql中间件执行SQL语句的方法，也有点类似axios发请求的方法。

找到你的微信小程序项目util/util.js或者在你希望的地方创建一个js文件，以下是封装POST和GET请求的代码。

var $post = function(url, data, result) {
    wx.request({
        url: url,
        data: data,
        method: 'POST',
        header: {
            'content-type': 'application/json;charset=utf-8'
        },
        success: function(res) {
            result(0, res)
        },
        fail: function(res) {
            result(res, 0)
        }
    })
}

var $get = function(url,result) {
    wx.request({
        url: url,
        method: 'GET',
        header: {
            'content-type': 'application/json;charset=utf-8'
        },
        success: function (res) {
            result(0, res)
        },
        fail: function (res) {
            result(res, 0)
        }
    })
}

module.exports = {
    $post: $post,
    $get: $get
}

虽然代码看起来有点多，不过一次配置终身使用是非常香的！封装的思路是，将wx.request请求所必须的几个参数提取出来，放到function的参数了，在调用的时传入。比如function(url, data, result)，第一个参数为请求的url地址，第二个参数为传递给服务器的数据，第三个参数就是回调函数了。具体请看代码，相信你能很快明白的。

同理，我们也可以对请求的url地址进行封装，将所有的url地址封装到一个js文件内，方便管理。

const serverBaseUrl = 'https://localhost:520/';
module.exports = {
    //接口1 方法post 参数code[number]
    api_1: serverBaseUrl + 'api1',
    //接口2 方法get
    api_2: serverBaseUrl + 'api2',
    //接口3
    login: serverBaseUrl + 'login',
    register: serverBaseUrl + 'register'
}

使用方法

在你需要使用的页面目录下的js文件内引入

/* demo.js */
const util = require('../../utils/util.js')
const api = require('../../utils/api.js')

然后就可以按照封装时候的方法进行调用了

var data = { code: 520 };
util.$post(api.api_1, data, (err, data) => {
    if (err) {
        console.log(err)
    } else {
        this.setData({
            message: data.data[0].text
        })
    }
})