小程序云开发封装callFunction请求

前言

我们在云开发过程中使用云函数，在请求前会做一点通用的事情（显示Loading），不可能每次都写，太麻烦了。

但是很多同学已经完成了项目，如果重新使用新的封装请求，会改很多地方，所以为了方便，我重写了微信的callFunction方法

代码

let callFunction = wx.cloud.callFunction
//全局请求遮罩
var needLoadingRequestCount = 0;

function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    wx.showLoading({
      title: '加载中',
      mask: true,
      icon: 'none'
    })
  }
  needLoadingRequestCount++;
};

function tryHideFullScreenLoading() {
  needLoadingRequestCount--;
  if (needLoadingRequestCount === 0) {
    wx.hideLoading();
  }
};

//拦截器
let interceptors = {
  request: {
    interceptors: [],
    use(fun, err) {
      this.interceptors.push(fun)
    },
    intercept(data, reqIntercept) {
      for (let i = 0; i < this.interceptors.length; i++) {
        data = this.interceptors[i](data, reqIntercept) || data
      }
      return data
    }
  },
  response: {
    interceptors: [],
    use(fun, err) {
      this.interceptors.push(fun)
    },
    intercept(data, resIntercept) {
      try {
        for (let i = 0; i < this.interceptors.length; i++) {
          data = this.interceptors[i](data, resIntercept)|| data
        }
        return data
      } catch (e) {
        reject(e)
      }
    }
  }
}

interceptors.request.use((data, reqIntercept) => {
  if (reqIntercept.showLoading) {
    showFullScreenLoading();
  }
  return data
})

interceptors.response.use((data, reqIntercept) => {
  if (reqIntercept.showLoading) {
    tryHideFullScreenLoading();
  }
  return data
})

function asyncType(data) {
  let type = 'promise'
  if (['success', 'fail', 'complete'].some(item => Object.keys(data).includes(item))) {
    type = 'callback'
  }
  return type
}

wx.cloud.callFunction = function (data, config = {
  showLoading: true
}) {
  data = interceptors.request.intercept(data, config)
  let type = asyncType(data)
  if (type == 'callback') {
    if (data.complete) {
      var _complete = data.complete;
    }
    data.complete = function (arg) {
      interceptors.response.intercept(data, config)
      if (_complete) {
        _complete.call(this, arg);
      }
    }
    return callFunction.call(this, data)
  } else {
    return callFunction.call(this, data).finally(() => {
      interceptors.response.intercept(data, config)
    })
  }
}

module.exports = interceptors

                                                                                             rq.js

这个是主要工具方法，在app.js直接引入就可以了。

let rq = require("./util/ajax.js");

//看个人情况使用
rq.request.use((data, config) => {
  //请求前做的事情,校验登录什么的
  return data
})
rq.response.use((data, config) => {
  //请求后做的事情
  return data
})

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        env: '',
        traceUser: true,
      })
    }
  }
})

                                                                                            app.js

正常使用callFunction就可以了

const db = wx.cloud.database()
Page({
  /**
   * 我们添加了第二参数，控制一些逻辑的产生，可以不传
   * 
   * showLoading：默认为true  true就是现实Loading  可以自行传入false
   */
  onLoad: async function () {
    //1 
    
    // let res = await wx.cloud.callFunction({
    //   name: 'user-list'
    // },{
    //   showLoading:true
    // })

    //2  和上个面的效果是一样的
    let res = await wx.cloud.callFunction({
      name: 'user-list'
    })
    console.log(res)
  }
})

                                                                                            index.js

后言

内容判断还不够完善，如果需要更新和新功能可 @我