微信小程序api的promise化

安装

miniprogram-api-promise

前提是已经安装了node

安装前需要初始化

D:\wechat_project\wallpaper-chat>npm init -y
Wrote to D:\wechat_project\wallpaper-chat\package.json:

{
  "name": "wallpaper-chat",
  "version": "1.0.0",
  "description": "",
  "main": ".eslintrc.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
D:\wechat_project\wallpaper-chat>

此时在本地多出一个文件

image

执行命令,安装

npm i --save miniprogram-api-promise

安装完成，会多出一个文件夹

image

构建npm

image

构建完成多出一个文件夹

image

入口文件app.js中导入

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

调用promise化之后的异步api

Banner.js

// components/Banner/Banner.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    banner_list:[]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    async getBanner(){
      const {data:res}=await wx.p.request({
        methods:'GET',
        url: 'https://realwds-api.vercel.app/360/getAppsByCategory?cid=26&start=0&count=5',
      })
      console.log(res.data);
      this.setData({
        banner_list:res.data.data
      })
    }
  },
  lifetimes:{
    created(){
      this.getBanner()
    }
  }
})

Banner.wxml

<!--components/Banner/Banner.wxml-->
<view>
  <swiper indicator-dots autoplay circular>
    <swiper-item wx:for="{{banner_list}}" wx:key="index">
      <image src="{{item.url_mid}}"></image>
    </swiper-item>
  </swiper>
</view>