微信小程序之二次封装request网络请求

哈喽!今天给大家分享一个小技巧,大家做小程序项目的时候肯定会遇到数据对接,需要用到wx.request()这个方法,因为我们通常要进行多次的数据请求。于是乎又给大家带来一个偷懒的方法。还是老方法。封装
首先我们来看一下官方文档中介绍的wx.request()
wx.request()
正常用的时候我们是这样用的

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

但是由于我们一个项目当中经常要用到这个方法
所以我们就可以把它进行二次封装成自己喜欢的写法
以我为例,首先我们在utils这个里面建立一个config.js用来作为配置文件。把所有的二次封装的东西放在里面。怎么简单怎么来。
对于函数封装,每个人封装的方式方法也不一样,我就贴上我的代码分享一下

/**
 * 自定义request请求基类
 */
function ajax(Type, params, url, successData, errorData, completeData) {
//设置默认数据传数格式
  var methonType = "application/json";
  //访问的主域名
  var https = "http://love.w.bronet.cn"
  //判断请求方式
  if (Type === 'PUT') {
    var p = Object.keys(params).map(function (key) {
      return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
    }).join("&");
    url += '?' + p;
    params = {}
  }
  if (Type == "POST") {
    methonType = "application/x-www-form-urlencoded"
  }
  //开始正式请求
  wx.request({
    url: https + url,
    method: Type,
    header: {
      'content-type': methonType,
    },
    data: params,
    //成功回调
    success: (res) => {
      successData(res)
    },
    //错误回调
    error(res) {
    //检测是否传参errorData,如果有则执行回调errorData(res)
      if (errorData) {
        errorData(res)
      }
    },
    //检测是否传参completeData,如果有则执行回调completeData(res)
    complete(res) {
      if (completeData) {
        completeData(res)
      }
    }
  })
};

这样就封装了一个简单的wx.request()请求
然后在config.js里导出来

//导出模块
module.exports = {
    ajax:ajax
}

用的时候直接引入config.js文件

const config = require('../../utils/config.js');
    config.ajax('POST', {
      //参数
      uid: 6
    }, config.myCenter, (res) => {
        //成功函数回调区间,必写
    }, (res) => {
        //可写可不写,写即为失败回调
    },(res) => {
        //可写可不写,写即为不管失败或成功都进行回调
    })

这样用起来就特别方便,只需要几句代码就可以解决数据请求问题,最简短的方法如下

config.ajax('POST', {
      //参数
      uid:6
    }, config.myCenter, (res) => {
        //成功函数回调区间,必写
    })

谢谢大家能够阅读我这篇文章,感谢支持。我是小九

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页