微信小程序实现 post 与 get 请求封装全流程讲解

why 68 2024-10-09

本文主要和大家介绍微信小程序中post方法与get方法的封装的相关资料,让大家掌握如何封装,需要的朋友可以参考下,希望能帮助到大家。

微信小程序实现 post 与 get 请求封装全流程讲解

微信小程序开发post方法与get方法的封装

第一步:在utils文件夹下创建httpUtil.js文件

第二步:创建函数httpPost方法代码如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

function Post(url, data, cb, isShow, showNetError, that, showLoading) {

 if (showLoading == true || showLoading == undefined){

  wx.showNavigationBarLoading();

  wx.showLoading({

   title: '加载中...',

  })

 }

 var basicData = {

  vloginPwd: api.vloginPwd,

  vtoken: api.vtoken

 }

 if (!isEmpty(data)) {

  for (var key in data) {

   try {

    basicData[key] = data[key];

   } catch (e) { }

  }

 }

 wx.request({

  url: url,

  header: { 'content-type': 'application/x-www-form-urlencoded' },

  method: 'POST',

  data: basicData,

  success: (res) => {  

   if (res.data.state == 200) {

    typeof cb == "function" && cb(res.data, "");

   } else {

    if (isShow == true) {

     wx.showModal({

      title: '提示',

      content: res.data.msg,

      showCancel: false     

     })

    }

   }

  },

  fail: (err) => {

   if (showNetError) {

    that.setData({

     errorDisplay:'',

     containHidden:true

    })

   }  

  },

  complete: (res) => {  

   setTimeout(function () {

    wx.hideNavigationBarLoading();

    wx.hideLoading();

   }, 100

  }

 });

};

第三步,在module里添加:


1

2

3

4

module.exports = {

 httpGet: Get,

 httpPost: Post

};

第四步,引入


1

var httpUtil = require('../../utils/HttpHelper.js')

第五步,如何使用


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

onload:function(option){

  var that = this;

  httpUtil.httpPost(api.getListUrl, jsonData, function (res) {

   wx.showModal({

    title: '提示',

    content: res.msg,

    showCancel: false,

    confirmText:"查看",

    success: function (res) {

     console.log("res.data===", res.data);

     if (res.confirm) {

      that.toDetail(res.data);

     }

    }

   })

  }, true, true, this);

}

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序 navigateTo 数据传递方式全面剖析
下一篇:EasyUI Layout 实现 tabs 标签实例详细解析教程
相关文章

 发表评论

暂时没有评论,来抢沙发吧~