【微信小程序】-- 使用 npm 包 - API Promise化(四十二)

简介: 【微信小程序】-- 使用 npm 包 - API Promise化(四十二)



一、API Promise化

  前面已经介绍了使用 npm 包 - Vant Weapp,通过栗子学习了如何安装 Vant 组件库和使用方式,以及定制全局主题样式。接下来就来讲解一下另外一个使用 npm 包 - API Promise化。话不多说,让我们原文再续,书接上回吧。

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

  默认情况下,小程序官方提供的异步 API 都是基于回调函数实现的,例如,网络请求的 API 需要按照如下的方

式调用:

wx.request({
      url: '',
      method: '',
      data:{},
      success: (res) => {},
      fail:() => {},
      complete: () => {}
    })

  当这种异步 API 使用多的时候,就会容易造成回调地狱的问题,代码的可读性、维护性差!

2、什么是 API Promise 化

  API Promise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步 API,升级改造为基于 Promise 的异步 API,从而提高代码的可读性、维护性,避免回调地狱的问题。

3、实现 API Promise 化

  在小程序中,实现 API Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。它的安装和使用步骤如下:

  • 安装

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

  这里指定的安装版本是1.0.4,建议安装环境都要一致,不然版本不同可能会出现一些错误。

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

  • 使用

  在小程序 app.js 中,只需调用一次 promisifyAll() 方法,promisifyAll(wx, wxp)将 wx 上所有基于回调函数的 API promisi 化并挂载到 wxp 上。

app.js

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

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

  接下来就通过栗子来调用 Promise 化之后的异步 API,具体代码如下:

message.wxml

  定义按钮事件。

<van-button type="primary">van按钮</van-button>
<van-button type="danger" bindtap="getInfo">按钮2</van-button>

message.js

  定义对应的 tap 事件处理函数,调用方法返回是 promise 对象,可以使用用 asyncawait 进行优化。

Page({
  // 使用 async 和 await 对函数进行优化
  async getInfo(){
    // 将 res 解构成 data
    const {data : res} = await wx.p.request({
      method:'GET',
      url: 'https://www.escook.cn/api/get',
      data: {name: '我是夜兰的狗', age: 20}
    });
    console.log(res);
  },
})

  编译完成点击按钮 2 就可以看调试面板打印出对应的数据,可以来看一下运行效果:


总结

  感谢观看,这里就是使用 npm 包 - API Promise化的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
29天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
498 1
|
5月前
|
前端开发 小程序 JavaScript
微信小程序-Unhandled promise rejection TypeError: Cannot read property ‘get‘ of undefined
微信小程序-Unhandled promise rejection TypeError: Cannot read property ‘get‘ of undefined
|
2月前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
4月前
|
文字识别 小程序 安全
印刷文字识别操作报错合集之微信小程序调用API时路径总是返回不对,该如何处理
在使用印刷文字识别(OCR)服务时,可能会遇到各种错误。例如:1.Java异常、2.配置文件错误、3.服务未开通、4.HTTP错误码、5.权限问题(403 Forbidden)、6.调用拒绝(Refused)、7.智能纠错问题、8.图片质量或格式问题,以下是一些常见错误及其可能的原因和解决方案的合集。
|
3月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)
|
4月前
|
小程序 API
微信小程序getLocation报错 getLocation:fail the api need to be declared in the requiredPrivateInfos field in
微信小程序getLocation报错 getLocation:fail the api need to be declared in the requiredPrivateInfos field in
373 1
|
5月前
|
小程序 JavaScript 开发者
微信小程序构建npm
微信小程序构建npm
320 4
|
5月前
|
API
个人微信api接口源代码
个人微信api接口源代码
|
4月前
|
JavaScript 开发工具
支付系统----微信支付22------初始化Vue项目,npm run serve -- -- port 8888,Vue默认打开是8888的写法
支付系统----微信支付22------初始化Vue项目,npm run serve -- -- port 8888,Vue默认打开是8888的写法
|
4月前
|
API
支付系统----微信支付24--APlv3介绍,首先我们要引入支付参数,包含商户号,APPID、API秘钥,数字证书,用代码加载到应用程序当中,之后加载商户私钥,商户需要用私钥进行验签,微信平台接收商
支付系统----微信支付24--APlv3介绍,首先我们要引入支付参数,包含商户号,APPID、API秘钥,数字证书,用代码加载到应用程序当中,之后加载商户私钥,商户需要用私钥进行验签,微信平台接收商

推荐镜像

更多