微信小程序简单封装接口

微信小程序接口封装

比如说，现在我要访问后台数据，我面临两个问题：

• 我可能在多个模块中向后台发送数据请求，每次都需要再写一遍url 地址
• 当获取数据的地址发生变化时，我需要修改项目中所有的url地址

显然，上面两项工作费时费力，这个时候怎么办呢？
如果我们能将上面的接口封装起来，在项目中直接调用会不会方便很多？
答案是肯定的，因为所有的接口我们只需要在封装模块里面写一遍即可，如果要修改的话，也只需要修改封装模块里面的内容。
下面就给举个栗子：
我现在要封装我的后台请求数据的地址，在项目中先创建一个request文件夹，创建一个api.js文件

api.js文件

var baseUrl="http://h3kke4.natappfree.cc" // 定义公共主机地址（可能是动态变化的）
baseUrl=baseUrl+"/api/" //拼接固定路径

// 导出封装好的接口路径(使用模块化技术导出)
module.exports={
  homeBannerPath:baseUrl+"index/banner",//主页轮播图路径
  homeNewGoodsPath:baseUrl+"index/newGoods",//主页新品内容路径
  homeHotGoodsPath:baseUrl+"index/hotGoods",//主页人气商品内容路径
}

然后我们就可以在其他的js文件中调用我们封装好的接口啦
具体语法如下（主要看有注释的部分）：

var api=require("../../request/api.js") // 导入封装的api接口（模块化导入）！

Page({
  data: {
    banner:[] 
  },
  onLoad: function (options) {
   
    this.getBannerData(),
  },
  // 请求轮播图数据
  getBannerData(){
    wx.request({
      url:api.homeBannerPath, //调用封装好的接口！
      success:res=>{
        console.log("banner",res) 
        this.setData({
          banner:res.data.data.banner  
        })
      }
    })
  }
}