小程序API的promise化

小程序API的promise化

1.1、原因

​ 默认情况下，小程序官方提供的异步API都是基于回调函数实现的，缺点是容易造成回调地狱的问题，代码的可读性、维护性差。promise化改造可提高代码的可读性、维护性，避免回调地狱的问题。

什么是回调地狱
假如有三个API（a，b，c）,业务需求上，c需要b响应回来的数据作为参数才能进行请求，b也同样需要a执行返回的数据进行请求，那么就需要严格控制a，b，c三个API的执行顺序，确保a请求返回成功后才能请求b，b成功响应后执行c。
而原生的微信小程序API都是异步执行的，所以通常只能将请求b写在a的success回调函数中，请求c写在b的回调函数中，以此达到控制API执行顺序的问题，就会造成代码不断往右缩进，影响了代码的可读性与可维护性，这就是回调地狱。

1.2、改造步骤

1、下载npm

npm i --save miniprogram-api-promise

2、在小程序IDE中点击“工具”——>“构建npm”

3、在app.js头部添加代码

//1.在小程序入口文件中调用一次 promisifyAll()方法
import { promisifyAll } from 'miniprogram-api-promise'
//2.声明一个常量，为一个空对象
const wxp = wx.p = {}
//3.调用 promisifyAll()方法
promisifyAll(wx, wxp)

• 我们在 wx 全局对象上定义一个属性 p 让他和 wxp 指向同一个空对象
• promisifyAll : 做的事就是将 wx 拥有的属性方法都 copy 并改造了一份给了 wxp 这个对象
• 这样wxp和wx.p就都指向了同一个对象

4、使用实例

async getUserProfile() {
    const {data:res} = await wx.p.request({
      method: 'POST',
      url: 'http://localhost:10010/user/findUserById',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: {
        openid: '1'
      }
    })
    console.log(res);
  },

注意事项

1、如果小程序报错“regeneratorRuntime is not defined”。

• 解决方案为：在微信小程序IDE里，详情->本地设置 里，开启【增强编译】