在開發(fā)項目過大時，太多的接口如果不進行封裝的話會很難以管理佛猛，今天就來說一下怎么通過Promise進行二次封裝wx.request
第一步
在根目錄中創(chuàng)建config.js文件惑芭，把我們接口的前綴放在里面（不要忘記導(dǎo)出）
config.js代碼如下：
const config = {
loginUrl: 'https://www.*****.com',
url: 'https://www.*****.com'
}
export { config }
第二步
在根目錄中創(chuàng)建utils文件夾并在utils目錄中創(chuàng)建http.js文件
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 }
第三步
再次給接口分類，在根目錄下創(chuàng)建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
第四步
在對應(yīng)的js文件中直接調(diào)用就ok
import IndexModel from '../../models/index.js'
let _index = new IndexModel()
例如在onLoad生命周期里使用我們前面封裝的接口
//生命周期函數(shù)--監(jiān)聽頁面加載
onLoad: function (options) {
// 商鋪列表
_index.dataList('2', '10').then(res => {
console.log(res)
})
// 商鋪詳情
_index.dataDetail('136').then(res => {
console.log(res)
})
}
