| 小程序中PROMISE解决回调地狱及ASYNC\AWAIT使用 | 您所在的位置：网站首页 › 小程序使用promise › 小程序中PROMISE解决回调地狱及ASYNC\AWAIT使用 |
|
小程序中使用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 },是不是很简单呢！ |
| CopyRight 2018-2019 实验室设备网 版权所有 |