封装qwebchannel和axios函数

封装QWebChannel函数

之前每次qwebchannel请求都要new一次，流程繁琐，现在做出新的方式来封装qwebchannel，并且将axios也封装进来，实现前后端独立开发（即前端通过模拟数据进行开发，开发完成后调用qt后端进行实际调试）。

1. 现在全局注册axios和qwebchannel中起到通信作用的对象

 import axios from 'axios'
 import QWebChannel from "./assets/thirdjs/qwebchannel"; //引入qWebchannel

 new QWebChannel(qt.webChannelTransport,function(channel){
   window.qWebChannel = channel.objects.content; 
   //content为qt开发槽和信号的对象，将其注册为全局对象，方便后续的直接调用
 });


 window.axios = axios; //将axois注册为全局函数
 
 let axiosQWeb = require('./assets/thirdjs/axiosQWeb');
//---这一步应该在axiosQWeb函数完成后再添加

2. 编辑 axiosQWeb.js 函数

const { default: axios } = require("axios");

;(function(){
  /**
   * 这里的参数需要确定好，能兼容 axios 和 qWebchannel
   * qwebchannel 中的槽应该是唯一的，所以可以用槽名称作为url名
   * 前提：如果用axios 要先导入axios,这里不再重复导入
   * @param mode : 标志位，用于确定是用 axios 还是 qWebchannel
   * @param slot
   * @param signal
   * @param data
   * @param callback
   */
  var axiosQWeb = function(mode,{slot=null,signal=null,data=null,callback=()=>{return;}}){
    var url = '/'+slot;
    if(mode){
      // axios({
      //   method:'get', // 做伪数据应该多用get
      //   url,
      // })
      axios.get(url)
      .then(callback)
      .catch(()=>{return;})
    }else{
      //走qwebchannel
      alert(qWebChannel[slot]);
      qWebChannel[signal].connect(callback);
      qWebChannel[slot].call(null, data);
    }
  }
  window.axiosQWeb = axiosQWeb;
})();

module.exports = axiosQWeb; 

3. 在函数中可以直接进行使用

 axiosQWeb(0,{
 slot:'slot_ProjectFolder_get',
 signal:'singal_ProjectFolder_get',
 data:'',
 callback:(str) => {
          	//解析结果列表
          	var jsonStr = JSON.parse(str);
          	this.DBfileList = jsonStr;
          	//此时显示出弹框
          	this.loadDBFileVisible = true;
        }
 })