微信小程序开发之网络请求工具封装教程

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

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

网络请求的初始代码

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 = "https://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    });  },

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