微信小程序~ 网络请求工具的封装

之所以选择封装是为了代码的简洁性，而且封装起来的代码一个多处使用；像网络请求这种常见的操作，我们是需要将其封装为一个工具，在使用的使用直接引入，再使用就可以省去很多重复的代码。

下面以获取干货首页文章的网络请求分析

网络请求的初始代码

getGankData: function (url) {
    var that = this;
    wx.request({
      url: url,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function (res) {
          // 处理请求成功返回的数据
        that.processGankData(res.data.results);
      },
      fail: function (error) {
        console.log('错误信息是：' + error);
      }
    })
  },

经过封装后的代码

util.http(url, this.processGankData) ;

一个项目中不可能只有一个网络请求，如果每个请求都要写一遍重复的代码，虽然是没什么问题，但是能用一行代码解决的问题，为什么不用偏要用十几行去实现呢？

可以分为三个步骤来实现：

• 先在 utils.js中写好模板代码，通过module.exports方式提供给外部调用
• 在调用的.js文件中引入var util = require('../../utils/util.js');注意路径是相对路径，绝对路径会报错
• 最后在合适的地方调用即可。

写好模板代码utils.js

/**
 * 请求网络
 */
function http(url, callBack) {
  wx.request({
    url: url,
    method: 'GET',
    header: {
      "Content-Type": "json"
    },
    success: function (res) {
      callBack(res.data);
    },
    fail: function (error) {
      console.log(error)
    }
  })
}
module.exports = {
  http: http
}

引入封装好的代码reading.js

// 注意要使用相对路径哦~
var util = require('../../utils/util.js');
Page({
    ...
     /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var baseUrl = "http://gank.io/api/data/all/" ;
    var url = baseUrl + this.data.pageSize + "/" + this.data.page;
    this.data.requestUrl = baseUrl ;
    // 调用
    util.http(url, this.processGankData) ;
  },
})

解析数据reading.js

/**
   * 处理干货数据
   */
  processGankData: function (gankData) {
    var ganks = [];
    // 因为数据在 results 中，所以这里需要 gankData.results 去获取数据
    var results = gankData.results ;
    for (var idx in results) {
      var subject = results[idx];
      var time = subject.publishedAt;
      var time1 = time.replace('T',' ')
      var date = time1.substring(0,19);
      var temp = {
        desc: subject.desc,
        publishedAt: date,
        _type: subject.type,
        _id: subject._id,
        url: subject.url
      }
      ganks.push(temp)
    }
    var totalGanks = {}
    //如果要绑定新加载的数据，那么需要同旧有的数据合并在一起
    if (!this.data.isEmpty) {
      totalGanks = this.data.ganks.concat(ganks);
    }
    else {
      totalGanks = ganks;
      this.data.isEmpty = false;
    }
    wx.hideNavigationBarLoading();
    wx.stopPullDownRefresh()

    this.setData({
      ganks: totalGanks
    });
  },

至此网络请求工具封装完成。

需要源码的可以联系我
微信号：weixin1105894953，联系请备注