小程序学习笔记: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';

  3. 定义一个空白对象wxP,并将其赋值给wx.p这个自定义属性:

    const wxP = wx.p = {};

  4. 调用promisify2方法,将微信顶级对象wxwxP作为参数传入,实现 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>

  2. 在对应的页面 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 对象,因此可以使用asyncawait来优化 Promise 的操作。这样,我们就成功实现了调用 Promise 化后的异步 API,并且获取到了服务器返回的数据。

相关推荐
智者知已应修善业2 小时前
【51单片机用数码管显示流水灯的种类是按钮控制数码管加一和流水灯】2022-6-14
c语言·经验分享·笔记·单片机·嵌入式硬件·51单片机
孞㐑¥5 小时前
Linux之Socket 编程 UDP
linux·服务器·c++·经验分享·笔记·网络协议·udp
CC同学呀6 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
sealaugh328 小时前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
水木兰亭8 小时前
数据结构之——树及树的存储
数据结构·c++·学习·算法
鱼摆摆拜拜8 小时前
第 3 章:神经网络如何学习
人工智能·神经网络·学习
aha-凯心9 小时前
vben 之 axios 封装
前端·javascript·学习
freexyn10 小时前
Matlab自学笔记六十一:快速上手解方程
数据结构·笔记·matlab
很小心的小新11 小时前
12、jvm运行期优化
java·开发语言·jvm·笔记
666HZ66611 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss