董龙衣

专注于写代码并享受当下生活。

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

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

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

网络请求的初始代码

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,联系请备注

阅读更多

扫码向博主提问

去开通我的Chat快问

itxiaodong

买的到的知识都是不值钱的
  • 擅长领域:
  • Android
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ITxiaodong/article/details/80517445
个人分类: 小程序
所属专栏: 小程序之旅
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭