微信小程序之巧妙的封裝

巧妙的封裝

暴露一個訪問地址xapp.config.js

module.exports = {
    api_host: `https://a.squmo.com/yizu`
}

繼續引入，加暴露api.config.js

const xapp = require('./xapp.config.js');
// 注冊接口
module.exports = { 
    GetAddr: `${xapp.api_host}/GetAddr/index`
    ...
}

繼續暴露，加request處理 method.js

const api = require('./api.config.js');
const request = require('../common/request.js');
module.exports = {    
    GetAddr: (data) => request(api.GetAddr, data, 'POST')
    ...
}

使用方法

const Api = require("../../config/method.js");
const app = getApp();

Page({
  data: {
    addrs: [],
  },

  onLoad: function () {
    var self = this;
    var longitude = app.globalData.userlon;
    var latitude = app.globalData.userlat;

    // 獲取店鋪信息
    Api.GetAddr({
        lon: longitude,
        lat: latitude
    }).then(res => {
        let addrs = res.getAddr;
        console.log(JSON.stringify(addrs));
        let mindistance = addrs.reduce((prev, current) => (prev.distance < current.distance) ? prev : current)
        self.setData({
            addrs: mindistance
        });
    })
  }
  ...
})

這里是一個巧妙的層層封裝過程！

小程序，最重要的就是接口的使用！

通過這樣的封裝，使用起來非常方便！

有統一的入口地址！

可以指定接口的提交方式，POST，GET等等。

傳遞參數，獲取參數都非常的方便！

大刀闊斧，快刀斬亂麻！--譚康！