微信小程序接口封装
比如说,现在我要访问后台数据,我面临两个问题:
- 我可能在多个模块中向后台发送数据请求,每次都需要再写一遍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
})
}
})
}
}