在开发项目过大时，太多的接口如果不进行封装的话会很难以管理，今天就来说一下怎么通过Promise进行二次封装wx.request
第一步
在根目录中创建config.js文件，把我们接口的前缀放在里面
const config = {
loginUrl: 'https://www.*****.com',
url: 'https://www.*****.com'
}
export { config }
不要忘记导出
第二步
在目录中utils目录中创建http.js文件
直接上代码
import { config } from '../config.js'
class HTTP {
request(params) {
return new Promise((resolve, reject) => {
wx.request({
url: config._url + params.url,
method: params.method || 'GET',
data: params.data || null,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: res => {
resolve(res)
},
fail: err => {
reject(err)
}
})
})
}
}
export { HTTP }
第三步
再次给接口分类，在根目录下创建models文件夹，models里将不同页面的不同接口进行分类例如，public.js公共接口、index.js首页需要用的接口
下面看一下我的index.js是怎么分类的
import { HTTP } from '../utils/http.js'
const _HTTP = new HTTP()
class IndexModel {
// 商铺列表
dataList (page, rows) {
return _HTTP.request({
method: 'POST',
url: '/***',
data: {
page,
rows
}
})
}
// 商铺详情
dataDetail (id) {
return _HTTP.request({
method: 'POST',
url: '/***',
data: {
id
}
})
}
}
export default IndexModel
第四步
在要使用的js文件里直接调用就行了
import IndexModel from '../../models/index.js'
let _index = new IndexModel()
例如在onLoad生命周期里使用我们前面封装的接口
//生命周期函数--监听页面加载
onLoad: function (options) {
// 商铺列表
_index.dataList('2', '10').then(res => {
console.log(res)
})
// 商铺详情
_index.dataDetail('136').then(res => {
console.log(res)
})
}
这样我们接口就更加的便于管理、维护了
小伙伴们看完记得点个小心心
