小程序的网络请求封装

我们前端开发就要有面向对象的思想，让自己写的程序更加简单明了，不要有太多的融于代码，所以这里提到了封装的思想。

之前的项目里每次调用网络请求都调用了类似的代码：

//加载数据
  requestData() {
    var that = this
    if (that.data.listData.length < 1) {
      wx.showToast({
        title: '加载中',
        duration: 500
      })
    } else {
      wx.showNavigationBarLoading()
    }
    wx.request({
      url: app.globalData.webUrl+"serviceAction/getStoreList.do",
      data: {
        longitude: app.globalData.longitude,
        latitude: app.globalData.latitude,
        city: "长沙",
        page: this.data.pageNum,
        pagesize: 10,
        userId: 38971,
      },
      method: "POST",
      "Content-Type": "application/x-www-form-urlencoded",
      success: function (res) {
        wx.stopPullDownRefresh()
        if (that.data.pageNum == 1) {
          that.data.listData = []//清空数组
        }
        var list = [];
        var imgUrl = [];
        var url = "http://yijiao.oss-cn-qingdao.aliyuncs.com/";
        for (var i = 0; i < res.data.content.length; i++) {
          list.push(res.data.content[i]);
          imgUrl.push(url + res.data.content[i].mainImgUrl)
          console.log("请求成功" + res.data.content[i])
        }
        that.setData({
          listData: list,//更新数据
          imageUrl: imgUrl
        })
      },
      fail: function () {
        wx.showModal({
          title: '加载出错',
          showCancel: false
        })
      },
      complete: function () {
        wx.hideToast()
        wx.hideNavigationBarLoading()
      }
    })
  }

每次只要涉及网络获取数据，就会有这些冗余代码的出现，之前不太熟悉，，没有做封装，现在做了一个项目，知道了很多思想，也了解了大致，想做一个简单的调用，也方便了以后查找某个接口的简化。

1.咱们把公共方法写在util.j中
util.js代码：

var webUrl = "https://www.jiaodutong.com/";
//网络请求方法
function getWebDataWithPostOrGet(model){
  wx.request({
    url: webUrl +model.url ,
    data:model.param,
    header: {
      "Content-Type": "application/json"
    },
    method: model.method,
    success: function (res){
      model.success(res.data)
    },
    fail: function(res){
      wx.showModal({
        title: res,
        showCancel: false
      })
    }
  })
}
// 导出模块
module.exports = { getWebDataWithPostOrGet: getWebDataWithPostOrGet
}

然后前端调用就可以这样做了：

var utils = require('../../utils/util.js')
var webData = {
       "longitude": app.globalData.longitude,
         "latitude": app.globalData.latitude,
          "city": "长沙",
          "page": 0,
           "pagesize": 10,
           "userId": 38971
      }
    utils.getWebDataWithPost({
      url: utils.bigUrl ,
      param: webData,
      method: "POST",
      success:function (data){
        console.log(data.content[0].mainImgUrl);
      }
    })

我之前写的 "Content-Type": "application/x-www-form-urlencoded", 报了个错误

错误

接口本身是没有问题的，但是400访问不到，想到可能是header 的问题，查看文档：

20170329160326213.jpg

改为 "Content-Type": "application/json"，正确拿到返回数据。

还有几点需要注意下：
1.一般对自己写的接口给自己用的时候，method方法或header都是约定好的，所以不用重复书写，哎util中写为固定的格式。

2.而fail回调方法也可以统一处理；进一步地，也可以对success回调里的针对code值进一步判断，特定错误码统一处理，比如跳转登录页面等。
例如下列代码，更加完善。

if(res.data.code==0)
      {
        model.success(res.data)
      }

3.如果每一个接口，都当作参数，项目变大后，接口特别多，查找不方便，可以写一个公共接口类，有一点需要注意就是暴露变量和暴露方法不同类如：
url.js代码

//获取门店列表
var bigUrl = "serviceAction/getStoreList.do";

//获取项目列表
var projectList = "serviceAction/getItemsByStoreId.do"

//导出模块
module.exports = {
  bigUrl,
  projectList
}

小程序的网络请求封装

猜你喜欢