完成一个小程序项目,我们肯定会请求跟多接口,为了我们代码的可读性和可维护性更好,我们可以将我们请求的接口进行封装。封装步骤如下。
1.首先在根目录下创建一个http文件夹,在文件夹下分别创建:env.js,api.js,request.js三个文件。好了废话不多说直接上代码。
env.js代码如下
//设置公共访问的url,即环境变量
module.exports = {
// 开发环境
dev: {
baseUrl: 'http://localhost:3000'
},
// 测试环境
test: {
baseUrl: 'www.test.com'
},
// 线上环境
prod: {
baseUrl: 'https://api.it120.cc'
}
}
api.js代码如下
// 引入request请求
const {
request
} = require('./request.js')
// 基于业务封装的接口
module.exports = {
/**
* 拿封装商品列表举例
*/
// url,method,data,isSubDomain
getGoodsList: () => {
// console.log('获取商品列表方法')
return request('/shop/goods/list','POST',{},true); //第一个参数为地址,第二个参数为请求方式,第三个参数为传递的参数,第四个参数为是否需要token
},
//.........可以根据自己的数据继续封装
}
request.js 代码如下
// 引入env中的url
const {
baseUrl
} = require('./env.js').prod
// 专属域名
const subDomain = 'agai'
module.exports = {
/**二次封装wx.request()
* url:请求的接口地址
* method:请求方式
* data传参
* */
request: (url, method = 'GET', data = {}, isSubDomain) => {
// console.log(baseUrl)
let _url = `${baseUrl}/${isSubDomain?subDomain:''}${url}`
return new Promise((resolve, reject) => {
wx.showLoading({
title:"正在加载"
})
wx.request({
url: _url,
data: data,
method: method,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {
// console.log(res)
let {code}=res.data
if(code==0){
wx.hideLoading()
resolve(res.data)
}else{
wx.showToast({
title: '数据请求失败',
})
}
}
})
})
}
}
2. 然后就是如何引用,很简单,在那个页面需要请求数据在哪个页面引入即可。
拿index页面来举例:
(1) 在index.js页面顶部定义如下代码
const {
getGoodsList,
} = require('../../http/api.js')
(2)在page中去请求数据
getGoodsList().then(res => {
console.log(res) //res即是请求到的数据
})
欢迎个位大牛指点评论。。。