之所以選擇封裝是為了代碼的簡潔性,而且封裝起來的代碼一個多處使用;像網絡請求這種常見的操作,我們是需要將其封裝為一個工具,在使用的使用直接引入,再使用就可以省去很多重復的代碼。
下面以獲取干貨首頁文章的網絡請求分析
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');注意路徑是相對路徑,絕對路徑會報錯 最后在合適的地方調用即可。
/** * 請求網絡 */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}
// 注意要使用相對路徑哦~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) ; },})
/** * 處理干貨數據 */ 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 }); },
至此網絡請求工具封裝完成。
新聞熱點
疑難解答