小程序学习笔记: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,并且获取到了服务器返回的数据。

相关推荐
go546315846519 分钟前
基于分组规则的Excel数据分组优化系统设计与实现
人工智能·学习·生成对抗网络·数学建模·语音识别
##echo21 分钟前
嵌入式Linux裸机开发笔记9(IMX6ULL)GPIO 中断实验(1)
linux·c语言·笔记·单片机·嵌入式硬件
●VON37 分钟前
重生之我在暑假学习微服务第二天《MybatisPlus-下篇》
java·学习·微服务·架构·mybatis-plus
老华带你飞37 分钟前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽41 分钟前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
Yu_Lijing1 小时前
MySQL进阶学习与初阶复习第四天
数据库·学习·mysql
好学且牛逼的马2 小时前
学习随笔录
学习
我爱学嵌入式3 小时前
C语言第 9 天学习笔记:数组(二维数组与字符数组)
c语言·笔记·学习
im_AMBER7 小时前
学习日志19 python
python·学习
_Kayo_11 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习