小程序为了避免回调地狱，Promise化API简析

首先先了解一下什么叫回调地狱，“回调地域”指的是，多级的异步的嵌套调用的问题。

这种情况在前端开发中很常见，通过ajax/axios请求callback中拿到所需的值再把此值作为参数再发起请求。（可嵌套N层）

所以我们遇到这种情况就需要封装请求，避免产生回调地狱（可读性差不利于维护容易产生许多问题等）。

一、首先要使用Promise封装请求API：（uniapp示例，也可以改写成原生）

class Request {
  constructor(options = {}) {
    // 请求的根路径
    this.baseUrl = options.baseUrl || ''
    // 请求的 url 地址
    this.url = options.url || ''
    // 请求方式
    this.method = 'GET'
    // 请求的参数对象
    this.data = null
    // header 请求头
    this.header = options.header || {}
    this.beforeRequest = null
    this.afterRequest = null
  }

  get(url, data = {}) {
    this.method = 'GET'
    this.url = this.baseUrl + url
    this.data = data
    return this._()
  }

  post(url, data = {}) {
    this.method = 'POST'
    this.url = this.baseUrl + url
    this.data = data
    return this._()
  }

  put(url, data = {}) {
    this.method = 'PUT'
    this.url = this.baseUrl + url
    this.data = data
    return this._()
  }

  delete(url, data = {}) {
    this.method = 'DELETE'
    this.url = this.baseUrl + url
    this.data = data
    return this._()
  }

  _() {
    // 清空 header 对象
    this.header = {}
    // 请求之前做一些事
    this.beforeRequest && typeof this.beforeRequest === 'function' && this.beforeRequest(this)
    // 发起请求
    return new Promise((resolve, reject) => {
      let weixin = wx
      // 适配 uniapp
      if ('undefined' !== typeof uni) {
        weixin = uni
      }
      weixin.request({
        url: this.url,
        method: this.method,
        data: this.data,
        header: this.header,
        success: (res) => { resolve(res) },
        fail: (err) => { reject(err) },
        complete: (res) => {
          // 请求完成以后做一些事情
          this.afterRequest && typeof this.afterRequest === 'function' && this.afterRequest(res)
        }
      })
    })
  }
}

export const $http = new Request()

二、使用前先记得在main.js上挂载：

// 按需导入 $http 对象
import {
	$http
} from '/class/request.js'
$http.baseUrl = '你的接口地址'
uni.$http = $http

三、使用async，配合await解构出res：

async fetchInfo() {
    const { data: res } = await uni.$http.get('/api/public/v1/xxxx')
    console.log(res)
    let params = {
        id: res
    }
    const { data: res1 } = await uni.$http.post('/api/public/v1/yyyy', params)
    console.log(res1)
    //如有err/succ
    const [err, succ] = await uni.$http.post('/api/public/v1/yyyy', params)
    console.log(succ)
    if(res1.status === 200) return //...do something
}

结语：使用ES6特性Promise把请求代码写得优雅起来吧~