微信小程序接口封装
今天在做项目的时候,那个接口的调用,写的很麻烦,是在当前文件的js文件里写的wx.request里调用的
然后为了方便好用,可以将其封装起来,接下来,我们来进行一个封装
- 首先呢,可以建个文件夹http
- 然后呢,在他下面建一个可以存放公共地址的env.js文件
如:
module.exports={
//开发环境
dev:{
baseUrl:'http://127.0.0.1:8080'
},
//生产环境
prod:{
baseUrl:'https://api.it120.cc'
},
//测试环境
test:{
baseUrl:'https://api.1909A.com'
}
}
- 在通过建一个request.js文件
在里面引入const { baseUrl } = require('./env.js').prod
如:const { baseUrl } = require('./env.js').prod //封装ajax const vipUrl = 'jh0927' module.exports = { request: function (url, method = "GET", data = {}, isSubDomain = true) { let fullUrl = `${baseUrl}/${isSubDomain ? vipUrl : ''}/${url}`; wx.showLoading({ title: '玩命加载中', }) return new Promise((resolve, reject) => { wx.request({ url: fullUrl, method, data, header: { 'Content-type': 'application/x-www-form-urlencoded' }, success(res) { // console.log('res::',res) if (res.statusCode === 200 && res.data.code === 0) { resolve(res.data.data) wx.hideLoading() } else { wx.showToast({ title: '接口有问题,请检查', }) reject('接口有问题,请检查') } }, fail(error) { wx.showToast({ title: '数据接口有问题', }) reject('数据接口有问题') } }) }) } }
- 在通过建一个放置我们项目中所用到的接口的api.js文件
在里面引入const { request }=require('./request.js');
如:const { request }=require('./request.js'); //项目中用到的各种业务接口的封装 module.exports={ //商品分类接口 lbj_cate:()=> { return request('shop/goods/category/all','GET','',true) }, //banner图接口 getBanner:()=>{}, //商品详情接口 getDetail:(id)=>{ return request('shop/goods/detail','GET',{id:id},true) }, //添加收藏 addFav:(goodsId,token)=>{ return request() } }
- 最后通过在需要引入的js中进行引入
const { lbj_cate }=require('../../http/lbj_classifyApi.js') ```
这样就封装好了,OK