小程序 3 封装 (wx.request)

Posted 2021-05-09 liyunlonggg

用promise封装 wx.request()

      promise 是一个 构造函数,主要是用来封装异步操作并可以获取成功(relove)或失败(reject)的结果  

     首先创建一个http文件夹

     里面有三个js文件  分别是:api.js (用来存储接口地址)  fetch.js(用来封装wx.request)  http.js (用来合并 api.js 和 fetch.js)

            api.js

                  

module.exports={
  // 名字 : '地址'
  banner:'/home/multidata'
}

 

fetch.js 

        

module.exports = (url, method, data) => {
  // 定义一个变量 用来接受Promise 返回来的值
  let p = new Promise((resolve, reject) => {
    wx.request({
      // 地址
      url: url,
      // 要传输的数据
      data: data,
      // 什么请求
      method: method,
      // 返回回来的数据  正确的情况下
      success(res) {
        resolve(res)
      },
      // 错误的情况下
      fail(err) {
        reject(err)
      }
    })
  })
  // 返回 p
  return p
}

   http.js

 

let api = require('./api');

let fetch = require('./fetch');
// 定义接口开头
let urlBase = 'http://123.207.32.32:8000/api/h8';
// 创建函数
function banner() {
  // 返回banner 对象
  return fetch(urlBase+api.banner,'get',{})
}

module.exports={
  // 返回banner对象
  banner
}

 然后在 app.js 中 定义

const  http = require('./http/http')

App({
     http
})

最后 在 index.js中定义

// 获取 app.js
const app = getApp();

Page({
     onLoad: function (options) {
        
       app.http.banner().then((res)=>{
        let {data:{data:{banner:{list}}}} = res;
           this.setData({
             arr:list
           })
     })
  },
})

最后到 index.wxml中渲染

<swiper autoplay='true' interval="1000" indicator-dots="true" indicator-color="black" indicator-active-color="white">
  <swiper-item wx:for="{{list}}" wx:key="index">
    <view >
      <image
      style="width:100%"
        src="{{item.image}}" />
    </view>
  </swiper-item>
</swiper>