小程序中使用wx.request调用API很方便,但是在业务逻辑比较复杂的页面使用难免会陷入回调地狱,怎么解决这个问题呢
第一步
重新封装wx.request为promise模式,具体代码如下
var app = getApp();
var host = "API统用网址前缀";
module.exports = {
HOST: host,
API_ROOT: host + '/api/',
API_VERSION: '1.1.0',
API_ID:2,
getData: (url, param) => {
return new Promise((resolve, reject) => {
wx.request({
url: host + url,
method: 'GET',
data: param,
success (res) {
console.log(res)
resolve(res.data)
},
fail (err) {
console.log(err)
reject(err)
}
})
})
},
// request post 请求
postData: (url, param) => {
var apiRoot = API_ROOT;
return new Promise((resolve, reject) => {
wx.request({
url: host + url,
method: 'POST',
data: param,
success (res) {
console.log(res)
resolve(res.data)
},
fail (err) {
console.log(err)
reject(err)
}
})
})
},
// loading加载提示
showLoading: () => {
return new Promise((resolve, reject) => {
wx.showLoading({
title: '加载中...',
mask: true,
success (res) {
console.log('显示loading')
resolve(res)
},
fail (err) {
reject(err)
}
})
})
},
// 关闭loading
hideLoading: () => {
return new Promise((resolve) => {
wx.hideLoading()
console.log('隐藏loading')
resolve()
})
}
}
第二步
页面引入并使用
var api = require('../../utils/tongbu.js');
getfilelist () {
return new Promise((resolve, reject) => {
api.getData('home/index/filelist', {
curpage: 1,
appid: api.API_ID,
pagenum:50,
nianjiid:0,
cateid:0,
paixu:1,
keyword:''
}).then((res) => {
this.setData({
filelist: res.data
})
resolve()
})
.catch((err) => {
console.error(err)
reject(err)
})
})
},
第三步
下载runtime.js并引用,使用async,await
const regeneratorRuntime = require('../../utils/runtime');
async init () {
await api.showLoading() // 显示loading
await this.getconfig() // 请求数据
console.log(this.data.config)
await this.getfilelist() // 请求数据
await api.hideLoading() // 等待请求数据成功后,隐藏loading
},
是不是很简单呢!