微信小程序开发中http请求封装的方法

这篇“微信小程序开发中http请求封装的方法”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序开发中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.js

var 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: {}, // 设置请求的 header    success: function(res){     //注意：可以对参数解密等处理     requestHandler.success(res)    },    fail: function() {     requestHandler.fail()    },    complete: function() {     // complete    }   }) } module.exports = {  GET: GET,  POST: POST }

1.页面中调用（以GET请求为例）

  //导入js   var 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请求封装的方法”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。