以聚合数据免费接口为例，通过 Class 类继承方法，让小程序实现项目化接口调

微信小程序数据来源，是通过接口实现的。但接口如何调，数据如何取？每个人都有不同的方法，下面以聚合数据免费接口为例。

配置接口 config.js

聚合数据请求接口需要以key作为参数。

const config = {
    api_base_url: "http://apis.juhe.cn/goodbook",
    key: "93bdf89de207034fa6c7544f88b99c76"
};

export {
    config
}

封装 wx.request 方法

ES6 中有类方法可以直接使用，使用 HTTP 作为类名，新建 request 作为类的方法，在这个方法中调用 wx.request。

class HTTP{
  
  //request
  request(params) {
    let that = this;

    if (!params.method) {
      params.method = ‘GET‘;
    }
    wx.request({
      url: config.api_base_url + params.url + "?key=" + config.key,
      data: params.data,
      method: params.method,
      header: {
        ‘content-type‘: ‘application/json‘
      },
      success:(res)=>{
        let code = res.statusCode.toString();
          let error_code = res.error_code;

        if(code.startsWith("2")){
          wx.showToast({
            title: res.data.reason,
          });

          //通过回调函数将获取的值回传
          params.success(res.data);
        } else{
            this._show_message(error_code);
        }
      },
      fail:(err)=>{
          console.log("err    " + err)
      }
    });
  }

    //显示报错信息
    _show_message(error_code){
        if(!error_code){
            error_code == 1
        }
        wx.showToast({
            title: tips[error_code],
            icon:‘error‘,
            duration:2500
        })
    }
}

export {
    HTTP
}

这个 request 方法有用到基本接口配置文件config以及请求成功或失败后提示的报错信息，需要将 config 导入，并定义接口报错信息。

小程序的文件引用路径必须用相对路径，使用绝对路径可能会导致路径指向不正确。

import {config} from "../config";

const tips = {
    1:"不好意思，错了",//默认错误
    205001:"图片类目为空",
    205002:"图书类目ID不能为空",
    205003:"查询不到结果",
    10001:"错误的请求KEY",
    10002:"该KEY无请求权限",
    10003:"KEY过期",
    10004:"错误的OPENID",
    10005:"应用未审核超时，请提交认证",
    10007:"未知的请求源",
    10008:"被禁止的IP",
    10009:"被禁止的KEY",
    10011:"当前IP请求超过限制",
    10012:"请求超过次数限制",
    10013:"测试KEY超过请求限制",
    10014:"系统内部异常",
    10020:"接口维护",
    10021:"接口停用"
}

外部使用 request 方法时，必须将这个 class 实例化：

const http = new Class();
const request = http.request();

使用 Module 作为不同业务处理数据的方法

业务不同，接口不同，调用接口的参数以及返回的数据也不同。比如，catalog 这个业务，包含查询 catalog ，catalog 详情，catalog 目录等，不能使用同一个 request 处理，也尽量不要在 Pages 中直接调用接口，可能会带带来的安全问题，因此需要将处理数据的方法以业务的不同分别写。每个人不同，可能写法不同，但是在实操时应该有这样的想法的。

通过继承 HTTP Class 直接调用 request 方法请求数据。

例,查询 catalog：

class ClassCatalogModel extends HTTP{

    getCatalog(sCallback) {
      this.request({
        url: "/catalog",
        success: (res) => {
          // 通过回调方法将数据将数据获取到
          sCallback(res)
        }
      })
    }
}

export {
    ClassCatalogModel
}

sCallback 作为promise中成功之后的回调方法，将获取的数据返回。小程序中的所有数据请求大都是异步请求，因此使用 callback 将数据回调是比较合理的。

在页面加载后触发 Module 方法

通常数据是在 onLoad 方法中加载并执行。这里需要注意，更新数据需要用到 setData 方法，建议在 data 中定义要 setData 的对象名称。

import { ClassCatalogModel } from ‘../../models/classCatalog.js‘;
let catalogModel = new ClassCatalogModel();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    catalogData: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    catalogModel.getCatalog((res)=>{
        if(res != null || res != ‘‘){
            this.setData({
                catalogData: res.result
            });
            console.log(this.data.catalogData);
        }
    })
  }
})

 

使用 Class 类可以方便的继承类中的各个方法，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。