小程序wx.request封装

最新推荐文章于 2025-10-17 11:01:10 发布

原创最新推荐文章于 2025-10-17 11:01:10 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#wx.request封装 #小程序封装 #wx.request

小程序专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种简化小程序API调用的方法，通过封装wx.request实现接口请求复用，减少代码冗余，提高开发效率。

小程序官方接口示例：

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
  	'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  }
})

其中，url中的网址部分，header部分，method: 'POST',是重复的，每个页面都写一遍wx.request非常麻烦。

1.新建一个js（一般放在小程序utils文件夹下）。随意命名（我这个命名是wxrequest.js）。

var app = getApp();
function request(url, postData, doSuccess, doFail, doComplete) {
  var api_url = app.globalData.api_url;
  wx.request({
    url: api_url + url,
    data: postData,
    method: 'POST',
    success: function(res) {
      if (typeof doSuccess == "function") {
        doSuccess(res);
      }
    },
    fail: function() {
      if (typeof doFail == "function") {
        doFail();
      }
    },
    complete: function() {
      if (typeof doComplete == "function") {
        doComplete();
      }
    }
  });
};
module.exports.request = request;

2.在需要调用接口的页面顶部引入这个文件。

3.在页面中调用接口，直接用这个写法

request.request(
      'adp',          //需要传给wxrequest.js 的 url
      {pos: 'HOT'},   //需要传的 data
      function(res) {   //传成功了，接口出的东西。
        //接口调用成功后要干的事儿。
      console.log('QQ39560458',res.data)
        if (res.data.err == 0) {
          that.setData({
            adp: res.data.data.imgs
          })
        }
      }
    )

出了数据直接赋值就行了。

有什么不懂的，欢迎下方留言。