安裝

miniprogram-api-promise
前提是已經(jīng)安裝了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>

此時(shí)在本地多出一個(gè)文件

image.png

執(zhí)行命令,安裝

npm i --save miniprogram-api-promise

安裝完成，會多出一個(gè)文件夾

image.png

構(gòu)建npm

image.png

構(gòu)建完成多出一個(gè)文件夾

image.png

入口文件app.js中導(dǎo)入

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

調(diào)用promise化之后的異步api

Banner.js

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

  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  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>

image.png