之所以选择封装是为了代码的简洁性,而且封装起来的代码一个多处使用;像网络请求这种常见的操作,我们是需要将其封装为一个工具,在使用的使用直接引入,再使用就可以省去很多重复的代码。
下面以获取干货首页文章的网络请求分析
网络请求的初始代码
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,联系请备注