【微信小程序】使用 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);
    
  }

{data:{data:res}} 结果：