原生小程序开发，解决wx.request方法会产生回调地狱的问题_修改wx.request

一、 应用场景

小程序页面初始化时，需要去服务端获取token，所带参数在另外两个接口请求中，所写代码可能是这样子的：

onLoad(options) {
  this.getToken()
},
getToken() {
  wx.request({
    url: '后端API地址1',
    success: (res) => {
      // console.log(res)
      wx.request({
        url: '后端API地址2',
        success: (data) => {
          // console.log(data)
          wx.request({
            url: '后端API地址3',
            success: (r) => {
              console.log(r)
            }
          })
        }
      })
    }
  })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

回调函数里面嵌套回调函数，这就是传说中的回调地狱。可读性非常差，维护起来可能要哭。怎么办？Promise化。

二、 API Promise化

1. 方式一

request.js相关代码

const baseUrl = 'https://www.escook.cn/api'
const sendRequest = (params) => {
  // console.log(params)
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + params.url,
      method: params.method || 'GET',
      data: params.data,
      success: res => {
        // console.log(res)
        resolve(res)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}
export default sendRequest
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

home.js相关代码

import sendRequest from "../../utils/request"

Page({
  getData() {
    sendRequest({
      method: 'POST',
      url: '/post',
      data: {name: 'buddha', age: 18}
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },
  onLoad(options) {
    this.getData()
  },
  /**省略其它代码*/	
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

home.js相关代码也可以优化成如下

import sendRequest from "../../utils/request"

Page({
  async getData() {
    const res = await sendRequest({
      method: 'POST',
      url: '/post',
      data: {name: 'buddha', age: 18}
    })
    console.log(res)
  },
  onLoad(options) {
    this.getData()
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. 方式二

鼠标右键点击在外部终端窗口中打开

终端中执行npm init -y和npm i --save miniprogram-api-promise

点击微信开发者工具中的工具菜单下的构建npm选项

构建完成后会跳出完成构建的弹框，点击确定即可

小程序miniprogram_npm目录下就会多出来一个miniprogram-api-promise目录，说明构建成功了

app.js相关代码是

import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wx.p)
1
2
3

home.js相关代码是

async getData() {
	const res = await wx.p.request({
	   'url': 'https://www.escook.cn/api/get',
	   'method' : 'GET',
	   'data': {name: 'buddha', age: 18}
	 })
	 console.log(res)
 },
1
2
3
4
5
6
7
8