微信小程序简单封装接口

微信小程序接口封装

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

    我可能在多个模块中向后台发送数据请求,每次都需要再写一遍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  
        })
      }
    })
  }
}
经验分享 程序员 微信小程序 职场和发展