小程序中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
},

是不是很简单呢！