百度小程序封装get post请求等全局函数及实现请求后端api数据循环展示功能

微信(小程序)  /  管理员 发布于 1年前   871

接上一篇百度小程序列表循环显示，因为上一篇是写死的测试数据用来循环列表展示

这篇就要动态的 直接请求服务端后台接口 返回数据，然后循环出来

get，post等函数需要全局使用，所以要封装一下

步骤

1.工具 （因为是测试demo,直接用Web IDE）

Web IDE 无需安装随时进行百度小程序的开发、调试、预览、发布小程序。并支持 git 、效率云等版本管理功能。

Web IDE 使用地址

https://ide.smartprogram.baidu.com/

新建文件夹utils

并新建utils/api.js文件用来放置全局函数get.post等

const baseUrl = 'https://www.zongscan.com'; 

const http = ({ url = '', param = {}, ...other } = {}) => {
  swan.showLoading({
    title: '加载中'
  });
  let timeStart = Date.now();
  return new Promise((resolve, reject) => {
    swan.request({
      url: getUrl(url),
      data: param,
      header: {
        'content-type': 'application/json'
        // 默认值 ,另一种是 "content-type": "application/x-www-form-urlencoded"
      },
      ...other,
      complete: res => {
        swan.hideLoading();
        // console.log(`耗时${Date.now() - timeStart}`);
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res.data);
        } else {
          reject(res);
        }
      }
    });
  });
};

const getUrl = url => {
  if (url.indexOf('://') == -1) {
    url = baseUrl + url;
  }
  return url;
};

// get方法
const get = (url, param = {}) => {
  return http({
    url,
    param
  });
};
const post = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'post'
  });
};

const _put = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'put'
  });
};
const _delete = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'put'
  });
};

module.exports = {
  baseUrl,
  get,
  post,
  _put,
  _delete
  
  // 使用方式
  // 单个请求
  // api.get('/journalismApi').then(res => {
  //   console.log(res)
  // }).catch(e => {
  //   console.log(e)
  // })
  // 一个页面多个请求
  // Promise.all([
  //   api.get('list'),
  //   api.get(`detail/${id}`)
  // ]).then(result => {
  //   console.log(result)
  // }).catch(e => {
  //   console.log(e)
  // })
};

在入口文件app.js中引入进来

/* globals swan */
const requireApi = require('./utils/api.js');

App({
    //全局函数  
    requireApi,
    onLaunch(options) {
        // do something when launch
    },
    onShow(options) {
        // do something when show
    },
    onHide() {
        // do something when hide
    }
});

使用

pages/index/index.js代码  get请求后端接口

const app = getApp();
Page({
  data: {
    testArr: []
  },
  onPageScroll: function (e) {
  },
  contactCB(e){
    console.log(e)
  },
  
  onLoad: function () {
     this.testArr();
  },
  testArr() {
    let _this = this;
    app.requireApi.get('/api/xx').then(res => {
      _this.setData({
        testArr: res
      });
      console.log("后端api数据", res);
    });
  }
});

pages/index/index.swan代码 循环视图

<view class="center">
    <view class="center-title">--中间</view>
    <block>
        <navigator url="" s-for="item, index in testArr">
            <view class="liebiao">
                <view class="liebiao-title">{{item.id}}</view>
                <view style="font-size:26rpx;color:red;">{{item.Name}}</view>
            </view>
        </navigator>
    </block>
</view>

效果图：