小程序中使用npm包和 API Promise 化

NewBoy
556 阅读2分钟

「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」

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

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

wx.request({
  url: ``,
  method: "GET",
  data: { },
  success: () => { }, //请求成功的回调函数
  fail: () => { },    //请求失败的回调函数
  complete: () => { },//请求完成的回调函数
})

但是，如果在实际开发中，大量使用以上这种方式，容易造成回调地狱的问题，代码的可读性与维护性也差。为了避免这样的问题出现，我们需要把这些基于回调函数的 API 优化成 基于 Promise 的异步 API

什么是 API Promise 化

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

实现 API Promise 化

在小程序中，实现 API Promise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包

  • 在小程序目录树中点击右键，选择 在外部终端窗口中打开

    Snip20220213_6.png

  • 打开终端后输入 npm i --save miniprogram-api-promise@1.0.4

    Snip20220213_8.png

  • 在小程序中，安装完一个包不能马上去使用，因为每次安装完的包都在 node_modules 目录中，小程序无法直接在 node_modules 中读取，每安装完一个包都需要对这个包进行构建，构建过程其实就是把这些安装的包迁移到 miniprogram_npm 中，这样小程序才可以使用（为了避免构建过程中出现错误，建议每次构建之前删除原来的 miniprogram_npm 目录，重新构建即可）

    安装 api-promise，构建之前

    Snip20220213_10.png

    安装 api-promise，构建之后

    Snip20220213_11.png

    Snip20220213_12.png

  • 在小程序入口文件中 app.js，只需调用一次 promisifyAll() 方法，即可实现异步 API 的 Promise 化

    • 通过es6的按需导入，将 promisifyAll() 这个方法导入

      import { promisifyAll } from 'miniprogram-api-promise'

App({
  //其他代码...
})

    • 定义一个空对象 wxp，同时，为了每个页面都能访问到 Promise 化的 API，需要把这个空对象赋值给 wx 的自定义属性 p

      import { promisifyAll } from 'miniprogram-api-promise'

const wxp = wx.p = {}

App({
  //其他代码...
})

    • 调用 promisifyAll() 方法，参数是是顶级对象 wx 和 wxp。这样就是实现了API 的 Promise 化

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

App({
  //其他代码...
})

调用 Promise 化之后的异步 API

Page({
  data: {
  
  },

  async getInfo() {
    const {data: res} = await wx.p.request({
      method: 'GET',
      url: 'https://www.escook.cn/api/get',
      data: {
        name: 'xiaobai',
        age: 18
      }
    })
    console.log(res)
  }
})
avatar
文章
阅读
粉丝