小程序API Promise化

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

一、应用场景

小程序页面初始化时需要去服务端获取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)
            }
          })
        }
      })
    }
  })
},

回调函数里面嵌套回调函数这就是传说中的回调地狱。可读性非常差维护起来可能要哭。怎么办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

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()
  },
  /**省略其它代码*/	
})

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()
  },
})

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)

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)
 },