【微信小程序】使用 npm 包 - API Promise化-- miniprogram-api-promise

2025/11/15 4:27:08 来源：https://blog.csdn.net/weixin_40874076/article/details/141476016 浏览: 次关键词：【微信小程序】使用 npm 包 - API Promise化-- miniprogram-api-promise

1. 基于回调函数的异步 API 的缺点

默认情况下，小程序官方提供的异步 API 都是基于回调函数实现的，例如，网络请求的 API 需要按照如下的方式调用：
在这里插入图片描述
缺点：容易造成回调地狱的问题，代码的可读性、维护性差！

2. 什么是 API Promise 化

在这里插入图片描述

3. 实现 API Promise 化

步骤一.安装包–miniprogram-api-promise

在这里插入图片描述

npm install --save miniprogram-api-promise@1.0.4

这里指定的安装版本是1.0.4，建议安装环境都要一致，不然版本不同可能会出现一些错误。
在这里插入图片描述

## 步骤二.重新构建- -`把文件夹 miniprogram_npm 删除再构建`

小程序在这里不同，每次安装完 npm 都需要构建一次才能使用。每次重新构建为了防止出现不必要的错误，建议都要把文件夹 miniprogram_npm 删除再构建。

(1) .删除项目中原来构建的miniprogram_npm

在这里插入图片描述

(2).重新构建npm

在这里插入图片描述

为什么需要构建npm

因为小程序里面无法直接读取node_modules，需要构建npm，把node_modules里面的包迁移到 miniprogram_npm

为什么建议删除`旧的miniprogram_npm`重新构建？

不删除直接构建很容易构建失败

步骤三.在app.js文件中，引入并调用promisifyAll方法

在这里插入图片描述

import {promisifyAll} from 'miniprogram-api-promise'const wxp = wx.p = {}promisifyAll(wx, wxp)
// console.log(wxp.getSystemInfoSync())

4. 调用 Promise 化之后的异步 API

在pages文件夹下页面的js中，直接用wx.p 调用 Promise 化之后的异步 API
在这里插入图片描述

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text><view>Vant组件的使用</view>
<van-button type="primary" class="my-button" style="{{buttonStyle}}" bindtap="setButtonStyle">按钮</van-button>
<van-toast id="van-toast" />
<van-button type="primary" bindtap="getInfo" style="{{buttonStyle}}">getInfo
</van-button>

// pages/home/home.js
import Toast from '@vant/weapp/toast/toast';
Page({/*** 页面的初始数据*/data: {buttonStyle:''},setButtonStyle(){this.setData({buttonStyle:`--button-primary-background-color: #13a7a0;--button-primary-border-color: #2c3131; ` })Toast.loading({message: '加载中...',forbidClick: true,});},async getInfo(){this.setButtonStyle()// console.log(wx.p.request());  //Promise// {data:{data:res}}const {data:{data:res}} = await wx.p.request({url: 'https://applet-base-api-t.itheima.net/api/get',data:{ name:'zs',age:20}})console.log('res',res);}