小程序学习笔记：API 的 Promise 化

在小程序开发的过程中，我们常常会与各种 API 打交道。其中，异步 API 是处理非阻塞操作的关键，但小程序官方默认提供的异步 API 大多基于回调函数实现，这在实际开发中会带来一些挑战。今天，就让我们一起探索如何对小程序里的 API 进行 Promise 化，让代码更加简洁、易读、易维护。

一、为什么要对小程序 API 进行 Promise 化

在小程序开发里，像网络请求这样常用的异步 API，在调用时往往需要提供成功、失败和请求完成这三个回调函数。例如：

wx.request({
  url: 'https://example.com/api',
  success: function(res) {
    console.log('请求成功', res.data);
  },
  fail: function(err) {
    console.log('请求失败', err);
  },
  complete: function() {
    console.log('请求完成');
  }
});

当项目中大量使用这类基于回调函数的异步 API 时，很容易陷入 “回调地狱”。想象一下，多个异步操作相互依赖，回调函数层层嵌套，代码会变得混乱不堪，可读性和维护性急剧下降。为了摆脱这种困境，将这些异步 API 优化为基于 Promise 的形式就显得尤为重要。

二、什么是 API 的 Promise 化

API 的 Promise 化，简单来说，就是通过额外的配置，把小程序官方基于回调函数的异步 API 升级改造为基于 Promise 的异步 API。这样做不仅能提高代码的可读性和维护性，还能有效避免回调地狱的问题。有了基于 Promise 的异步 API，我们写代码时会更加简洁、方便。

三、实现 API 的 Promise 化

（一）安装第三方 npm 包

在小程序中实现 API 的 Promise 化，主要依赖一个名为mini-program-api-promise的第三方 npm 包。安装步骤如下：

1. 打开微信开发者工具，在项目目录树的空白区域右键，选择 “打开终端”。
2. 在终端中输入安装命令：npm install --save mini-program-api-promise@1.1.4。这里指定版本号为1.1.4，以确保安装的稳定性。
3. 安装完成后，由于小程序的特殊性，不能直接使用新安装的包。我们需要对其进行构建。默认情况下，安装的包会存放在node_modules目录中，但小程序无法直接读取该目录下的包，需要构建将其迁移到mini-program_npm目录下。为防止构建出现错误，建议每次重新构建前，先删除mini-program_npm目录。具体操作是进入项目根目录，删除mini-program_npm目录（可使用shift + delete强制删除），然后回到开发者工具，点击 “工具” 菜单中的 “构建 npm”，等待构建完成即可。

（二）使用包实现 API 的 Promise 化

完成安装和构建后，接下来就是使用这个包对微信 API 进行 Promise 化。具体步骤如下：

1. 找到小程序的入口文件app.js。
2. 使用 ES6 的按需导入方式，从mini-program-api-promise包中导入promisify2方法：

import { promisify2 } from'mini-program-api-promise';

1. 定义一个空白对象wxP，并将其赋值给wx.p这个自定义属性：

const wxP = wx.p = {};

1. 调用promisify2方法，将微信顶级对象wx和wxP作为参数传入，实现 API 的 Promise 化：

promisify2(wx, wxP);

经过这几步操作，微信身上所有基于回调函数的异步 API 就都被 Promise 化了，并且挂载到了wxP对象上。之后在小程序的每个页面中，都可以通过wx.p来调用这些 Promise 化后的 API。

四、调用 Promise 化之后的异步 API

假设我们要在页面上添加一个按钮，点击按钮发起网络请求。具体实现步骤如下：

1. 在页面的 WXML 文件（如home.wxml）中添加一个按钮，并绑定tap事件处理函数：

<button type="primary" bindtap="getInfo">发起请求</button>

1. 在对应的页面 JS 文件（如home.js）中定义事件处理函数，在函数内部调用 Promise 化后的wx.p.request方法发起网络请求：

Page({
  async getInfo() {
    try {
      const res = await wx.p.request({
        method: 'GET',
        url: 'https://3w.2eck.cn',
        data: {
          name: '张三',
          age: 20
        }
      });
      const { data: resData } = res;
      console.log(resData);
    } catch (error) {
      console.log('请求失败', error);
    }
  }
});

在上述代码中，wx.p.request方法的返回值是一个 Promise 对象，因此可以使用async和await来优化 Promise 的操作。这样，我们就成功实现了调用 Promise 化后的异步 API，并且获取到了服务器返回的数据。