小程序统一引用api,判断不同栏目引用不同api

2019-07-20 0 Comments 362 Views 1 Times

写小程序的时候大多都是在每个目录的js下利用wx.request单独引用api,页面过多的后期修改会很麻烦，在这里统一引用一个api.js，后面修改只需去这个公共的js修改就会十分便捷

首先引用一个统一的api.js

// 小程序开发api接口统一配置
// 如果你的域名是： https://www.baidu.com/cn 那么这里只要填写 cn
let subDomain = '/api/'  // 子域名,没有就等于'' ,引用的api的目录
const API_BASE_URL = 'https://www.baidu.com'  // 主域名
 
const request = (url, method, data) => {
  let _url = API_BASE_URL + subDomain  + url

  return new Promise((resolve, reject) => {
    wx.request({
      url: _url,
      method: method,
      data: data,
      header: {
        'Content-Type': 'application/json'
      },
      success(request) {
        resolve(request.data)
      },
      fail(error) {
        reject(error)
      },
      complete(aaa) {
        // 加载完成
      }
    })
  })
}
 
/**
 * 小程序的promise没有finally方法，自己扩展下
 */
Promise.prototype.finally = function (callback) {
  var Promise = this.constructor;
  return this.then(
    function (value) {
      Promise.resolve(callback()).then(
        function () {
          return value;
        }
      );
    },
    function (reason) {
      Promise.resolve(callback()).then(
        function () {
          throw reason;
        }
      );
    }
  );
}
 
module.exports = {
  request,
  // 首页列表接口
  getList: data => request('/index/index','get', data),
  //推荐接口
  getRecommend: data => request('/Recommend/Recommend','get', data),
  //我的接口
  getMY: data => request('/my/my','get', data), 
}

然后在小程序的各个目录的js中头部引用

//获取应用实例
const WXAPI = require('../../wxapi/api')
const app = getApp()

在onload中执行

    WXAPI.getList({  //这里的getlist是指你在api.js中定义的获取路径

    }).then(function (res) {
      wx.hideLoading()
      if (res.code===0) {  
        that.setData({
          swiperList:res.data.swiperList,
        });
      }
    })
点赞