小程序request封装

Posted 2023-03-16

参考技术A 1、wx.request， https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
2、Promise，Promise 对象有以下两个特点:对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending: 初始状态，不是成功或失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败。

WxRequest(),可以放在小程序启动页app.js里面。也可以重新生成一个js页面。在需要引用的页面引入，如果是放在app.js里面的，在其他页面引入为 const app = getApp();，使用时 app.WxRequest(method,url,data); 如果是一个新的js页面。则按照小程序的引入规则引入。使用方法是差不多的。

小程序 3 封装 (wx.request)

用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>