wx小程序知识点(三)

三、封装小程序的数据请求

(1)在根目录创建utils目录,创建config.js、base.js

(2)在config.js中创建config类,并将请求路径配置给config的属性restUrl,并export

class Config {
  constructor () {}
}

Config.restUrl = ‘http://***.cn/api/v1/‘

export { Config }

(3)在base.js中引入config,把url赋值给base的属性

import { Config } from ‘config.js‘

class Base {
  constructor() {
    this.baseRequestUrl = Config.restUrl
  }
}

在 class Base 中封装request方法,只接受一个param 参数

request(params) {
    var url = this.baseRequestUrl + params.url
    if (!params.type) {
      params.type = ‘GET‘
    }
    wx.request({
      url: url,
      data: params.data,
      header: {
        ‘content-type‘:‘application/json‘,
        ‘token‘: wx.getStorageSync(‘token‘)
      },
      method: params.type,
      success: function (res) {
        params.sCallback && params.sCallback(res.data)
      },
      fail: function (err) {

      },
      complete: function (res) {

      },
    })
  }

(4)在页面的 index.js 中,构建好params的结构后,直接调用Base.request(params),例如

    var params = {
      url: ‘banner/‘ + id,
      method: ‘GET‘,
      sCallback:
      (res) => {
        //数据绑定
        this.setData({
          ‘bannerArr‘: res[0].item
          })
      }
   }
this.request(params)
 

 

  

wx小程序知识点(三)

上一篇:小程序 - 上传图片 裁剪图片


下一篇:微信小程序