HelloWorld

Designed & Developed By XingYu Xiao In China
头像 原创自 x先生 #微信小程序 1168

微信小程序封装请求

2020-02-27 18:27:50

如果你开发过微信小程序,那么你一定很熟悉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
        })
    }
})

赞 68

收藏

分享

本作品系 原创,作者:x先生

原文链接:https://www.shiniest.cn/blog/article/63

文本版权:本文版权归作者所有

转载请署名并注明出处 (禁止商业使用)


0条评论


0/200
    加载更多 正在加载 没有更多了...... 暂无数据

    相关文章

    • 暂无数据
    目录
      来自x先生的话
      暂无数据
      实时天气

      岳麓 更新时间:00:06

      8℃

      • 7℃

        体感温度

      • 北风0级

        风向

      • 89%

        相对湿度

      • 0.0mm

        降水量

      • 1021hPa

        大气压强

      • 5km

        能见度

      数据来源:QWeather
      热门标签
      本功能暂未开发