微信小程序之http请求封装详解及实例代码

微信小程序http请求封装

示例代码wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: {x: '' ,y: '' }, method:'POST', header: {'content-type': 'application/json' }, success: function(res) {console.log(res.data) }, fail: function( res ) {fail( res );}})以上为小程序的基本http请求代码，实际代码中如果每次这样来写是比较繁琐的，那我们就来做一下封装。

那代码中我们比较关注什么？

1.请求的参数，访问的接口2.GET/POST...请求方式3.请求参数统一处理（比如：加密、设置公共参数...）4.请求成功返回的数据（比如：解密、抽离逻辑层数据）5.请求失败反馈

我们不关注什么？

1.请求url（一般固定的配置在某个地方）2.根据不同的接口规则做不同的请求参数（比如：参数加密等）...

让我们代码实操

network.jsvar API_URL = 'http://localhost/loverule/api/api.php'var requestHandler = {params:{},success: function(res){// success},fail: function() {// fail},}//GET请求function GET(requestHandler) {request('GET',requestHandler)}//POST请求function POST(requestHandler) {request('POST',requestHandler)}function request(method,requestHandler) {//注意：可以对params加密等处理var params = requestHandler.params;wx.request({url: API_URL,data: params,method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT// header: {}, // 设置请求的 headersuccess: function(res){//注意：可以对参数解密等处理requestHandler.success(res)},fail: function() {requestHandler.fail()},complete: function() {// complete}})}module.exports = { GET: GET, POST: POST}1.页面中调用（以GET请求为例）//导入jsvar network = require("../../utils/network.js")//写入参数var params = new Object()params.api_name = "api_user_login"params.account = "hanqing"params.password = "123456"//发起请求network.GET({params: params,success: function (res) {console.log(res)//拿到解密后的数据，进行代码逻辑},fail: function () {//失败后的逻辑},})以上就是微信小程序之http请求封装详解及实例代码的详细内容，更多请关注小潘博客其它相关文章！