微信小程序 封装函数

1. 回调方式封装: http 请求

classic.js文件:

class HTTP {
  //http 请求类, 当noRefech为true时，不做未授权重试机制
  request(params) {
    var that = this
    var url = this.baseRestUrl + params.url;

    if (!params.method) {
      params.method = 'GET';
    }
    wx.request({
      url: url,
      data: params.data,
      method: params.method,
      header: {
        'content-type': 'application/json',
        'appkey':config.appkey
      },
      success: function (res) {
        // 判断以2（2xx)开头的状态码为正确
        // 异常不要返回到回调中，就在request中处理，记录日志并showToast一个统一的错误即可
        var code = res.statusCode.toString();
        var startChar = code.charAt(0);
        if (startChar == '2') {
          params.success && params.success(res.data);
        } else {
          params.error && params.error(res);
        }
      },
      fail: function (err) {
        params.fail && params.fail(err)
      }
    });
  }
};

export { HTTP };

拓展: 在请求的文件中书写具体的请求方法;

import { HTTP } from '../utils/http.js'

class ClassicModel extends HTTP{
  constructor() {
    super()
  }

  getLatest(sCallback){
    this.request({
      url:'classic/latest',
      success:(data)=>{
          // 如果不用箭头函数，this将指代不正确
          let key = this._fullKey(data.index)
          wx.setStorageSync(key, data)
          this._setLatestIndex(data.index)
          sCallback(data)
        }
    })
  }

}

export {ClassicModel}

使用:能够在page页面中比较方便的使用;

import {ClassicModel} from '../../models/classic.js'
let classicModel = new ClassicModel()

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    classicModel.getLatest((data)=>{
      this.setData({
        classic:data
      })
    })
  }
})

2. Promise方式封装：http请求

classic.js文件:

class HTTP {
   request({url,data={},method='GET'}) {
        return new Promise((resolve,reject) =>{
            this._request(url,resolve,reject,data,method)
        })
   }
  //http 请求类, 当noRefech为true时，不做未授权重试机制
  _request(url,resolve,reject,data={},method='GET') {
   wx.request({
      url:config.api_base_url + url,
      data: data,
      method: method,
      header: {
        'content-type': 'application/json',
        'appkey':config.appkey
      },
      success: function (res) {
        // 判断以2（2xx)开头的状态码为正确
        // 异常不要返回到回调中，就在request中处理，记录日志并showToast一个统一的错误即可
        var code = res.statusCode.toString();
        var startChar = code.charAt(0);
        if (startChar == '2') {
            resolve(res.data)
        } else {
            reject()
        }
      },
      fail: function (err) {
            reject()
      }
    });
  }
};

export { HTTP };

拓展: 在请求的文件中书写具体的请求方法;

import { HTTP } from '../utils/http.js'

class ClassicModel extends HTTP{
    //promise写法不需要写回调了  
    getLatest(){
        return this.request({
             url:'classic/latest',
             data:{
                name:'1',
                age:18
               },
             method:'POST'
        })
    }
}

export {ClassicModel}

使用:promise封装后的使用

import {ClassicModel} from '../../models/classic.js'
let classicModel = new ClassicModel()

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //promise的链式调用
    classicModel.getLatest()
    .then(res => {
        console.log(res)
        //返回另一个 请求函数
        return classicModel.getBook()
    })
    .then(res => {
        //这里能够拿到上面返回的函数的结果 做相应的处理
        console.log(res)        
    })
  }
})

3. 组件behavior 继承

在classic-beh.js文件中定义需要被复用的属性跟值:

let classicBehavior = Behavior({
  properties: {
    type:String,
    img:String,
    content:String
  },
  data: {
  }
})

export { classicBehavior }

使用:可以看到属性复用继承使用了

import {classicBehavior} from '../classic-beh.js'

Component({
  /**
   * 组件的属性列表
   */
  behaviors: [classicBehavior],
  properties: {
    src: String,
    title:String
  },
})