微信小程序数据来源，是通过接口实现的。但接口如何调，数据如何取？每个人都有不同的方法，下面以聚合数据免费接口为例。
配置接口 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 的通过修改原型链实现继承，要清晰和方便很多。