以聚合數據免費接口為例，通過 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 的通過修改原型鏈實現繼承，要清晰和方便很多。