分享一个小程序behavior属性封装的列表页数据加载通用

1. behavior属性是小程序中的混合模式开发，可以提炼代码，还可以根据自己的需求做各种不可描述的工作，具体可以看官方文档
   我这里新建了一个requestBeh.js文件，文件内容如下，包含两个方法，_init_data一般用于onLoad、tab切换、操作数据列表后需要更新数据，对数据进行第一次初始化，_load_data()一般用于onReachBotton方法，做触底分页加载

import {
    
    request} from "../service/request";

module.exports = Behavior({
    
    
  data: {
    
    
    dataList: [],
    dataListParams: {
    
    
      page: 1,
      init: false,
      loadMore: true
    }
  },
  methods: {
    
    
    /**
     * 初始化分页列表数据
     * @param apiName 请求名称
     * @param params 请求参数
     * @param loading 是否显示loading
     * @param callBack 是否使用callBack对请求数据进行预处理
     * @param listName 数据名称
     * @param prefix 请求前缀
     * @private
     */
    _init_data(apiName, params = {
    
    }, opts = {
    
    }) {
    
    
      opts = {
    
    
        loading: true,
        callBack: null,
        lastCallBack: null,
        listName: 'dataList',
        prefix: '/tripapi/',
        reset: true,
        msg: '',
        ...opts
      }
      let pageParamsName = opts.listName + 'Params'
      let pageParams = {
    
    
        page: 1,
        loadMore: true,
        init: false
      }
      this.setData({
    
    
        [pageParamsName]: pageParams
      })
      this._load_data(apiName, params, opts)
    },
    /**
     * 加载分页列表数据
     * @param apiName 请求名称
     * @param params 请求参数
     * @param loading 是否显示loading
     * @param callBack 是否使用callBack对请求数据进行预处理
     * @param listName 数据名称
     * @param reset 是否初始化数据
     * @param prefix 请求前缀
     * @private
     */
    _load_data(apiName, params = {
    
    }, opts = {
    
    }) {
    
    
      opts = {
    
    
        loading: true,
        callBack: null,
        lastCallBack: null,
        listName: 'dataList',
        prefix: '/tripapi/',
        reset: false,
        msg: '',
        ...opts
      }
      let pageParamsName = opts.listName + 'Params'
      let list = this.data[opts.listName]
      let pageParams = this.data[pageParamsName]
      if (pageParams.loadMore) {
    
    
        if (opts.loading) wx.showLoading({
    
    mask: true, title: '正在加载'})
        params = {
    
    
          page: pageParams.page,
          ...params
        }
        request(apiName, params, '', true, opts.prefix).then(res => {
    
    
          pageParams.page++
          if (opts.callBack && typeof opts.callBack === 'function') {
    
    
            res.data = opts.callBack(res.data, this)
          }
          if (opts.reset) {
    
    
            list = res.data
          } else {
    
    
            list = list.concat(res.data)
          }
          pageParams.init = true
          this.setData({
    
    
            [pageParamsName]: pageParams,
            [opts.listName]: list
          })
          if (opts.lastCallBack && typeof opts.lastCallBack === 'function') {
    
    
            opts.lastCallBack(this)
          }
          if (opts.loading) wx.hideLoading()
          if (opts.msg) wx.showToast({
    
    
            title: opts.msg,
            icon: 'none'
          })
        }).catch(() => {
    
    
          pageParams.loadMore = false
          if (opts.reset) list = []
          pageParams.init = true
          this.setData({
    
    
            [pageParamsName]: pageParams,
            [opts.listName]: list
          })
          if (opts.loading) wx.hideLoading()
          if (opts.lastCallBack && typeof opts.lastCallBack === 'function') {
    
    
            opts.lastCallBack(this)
          }
        })
      }
    },

    /**
     * 加载详情数据
     * @param apiName
     * @param params
     * @param opts
     * @returns {Promise<unknown>}
     * @private
     */
    _load_data_form(apiName, params = {
    
    }, opts = {
    
    }) {
    
    
      return new Promise((resolve, reject) => {
    
    
        opts = {
    
    
          loading: true,
          callBack: null,
          objName: 'dataForm',
          prefix: '/tripapi/',
          msg: '',
          isObj: false, //返回的值是否是对象类型
          ...opts
        }
        if (opts.loading) wx.showLoading({
    
    mask: true, title: '正在加载'})
        request(apiName, params, '', true, opts.prefix).then(res => {
    
    
          let dataForm = null
          if (opts.isObj) {
    
    
            dataForm = res.data
          } else {
    
    
            dataForm = res.data[0]
          }
          if (opts.callBack && typeof opts.callBack === 'function') {
    
    
            dataForm = opts.callBack(dataForm)
          }
          this.setData({
    
    
            [opts.objName]: dataForm
          })
          if (opts.loading) wx.hideLoading()
          resolve(dataForm)
        }).catch((err) => {
    
    
          if (opts.loading) wx.hideLoading()
          reject(err)
        })
      })
    }
  }
})

2. 使用案例如下：需要注意的是，正常的Page({})里面是不能直接使用的，所以要在页面的js里将Page改为Component，然后将页面方法全部放到methods: {}属性里

// package/user/guest/index.js
import requestBeh from '../../../behavior/requestBeh'

Component({
    
     //这里需要注意，将Page改为Component
  behaviors: [requestBeh],
  /**
   * 页面的初始数据
   */
  data: {
    
    
    tabList: [
      {
    
    name: '会员', type: 1},
      {
    
    name: '分销商', type: 2}
    ],
    tabActIndex: 0
  },

  methods: {
    
     //这里需要注意，将页面方法全部放到methods里面
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
    
    
      this._init_data('apiName', {
    
    type: 1})
    },
    onReachBottom: function() {
    
    
      let {
    
    tabList, tabActIndex}= this.data
      this._load_data('apiName', {
    
    type: tabList[tabActIndex].type})
    },
    //tab切换
    tabChange(e) {
    
    
      let {
    
    index, item} = e.currentTarget.dataset
      this.setData({
    
    
        tabActIndex: index
      })
      this._init_data('apiName', {
    
    type: item.type})
    }
  }
})