封装x2js+Promise实现JSON转XML格式

一般服务端接口的参数都是json格式，但是因为某些原因当入参需要XML格式的怎么办? 如安装在本地系统的ic卡驱动服务需要写卡操作的接口入参为xml格式：

现有参数，data项可以有多个：

    var json = {
      iccard: {
        operation: "writeCard",
        data:[{Id:1, Number:10001},...]
      }
    };

实际XML格式：

writeCard//接口操作标识writeCard为写卡。


1
10001



2
10002



3
10003

...

一种方式是把json数据通过正则把参数全都转成有闭合标签尖括号的字符串。其实是可以使用一个更简便、稳定的方法，使用x2js库把json转成xml格式，下载安装x2js库并导入：

import x2js from "x2js";
var x2jsxml = new x2js();
  if(iccardApi=="writeCard"){
    var json = {
      iccard: {
        operation: "writeCard",
        data: data.param
      }
    };
    data.param = x2jsxml.js2xml(json);//转成xml格式
  }

在请求之前对入参进行处理后把data带到入参中，使用Promise和Ajax封装一个专门处理ic卡XML接口对接的CCardAjax函数
ICCard.js：

"use strict";
import { Loading } from "element-ui";
import x2js from "x2js";
var x2jsxml = new x2js();
const baseUrl = "http://localhost:8888/iccard"; //ic卡控件地址
let ICCardObj = {};

//iccardApi(read读卡，writeCard写卡)
ICCardObj.ajax = (iccardApi, data, that) => {
  var isHideErrorTip = false;
  if ("isHideErrorTip" in data) { //是否不显示未插卡提示
    isHideErrorTip = data.isHideErrorTip;
    delete data.isHideErrorTip;
  }
  if(iccardApi=="writeCard"){
    var json = {
      iccard: {
        operation: "writeCard",
        data: data.param
      }
    };
 
    data.param = x2jsxml.js2xml(json);

  }
  var loading = Loading.service({
    lock: true,
    text: "正在执行操作...",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.3)"
  });
  return new Promise((resolve, reject) => {
    $.ajax({
      url: baseUrl + "/" + iccardApi,
      type: "GET",
      data: data,
      success: function(res) {
        loading.close();
        if (res.resultCode == "error") { //未插卡 读卡失败
          reject(res);
          if (!isHideErrorTip) {
            that.$message({
              title: "警告",
              message: "请插卡！",
              type: "error"
            });
          }
        } else {
          resolve(res.dataList);
          console.log("读取成功");
        }
      },
      error: function(res) {//读卡失败
        loading.close();
        if (!isHideErrorTip) {
          that.$message({
            title: "警告",
            message: "未启动IC卡控件，请先正确启动",
            type: "error"
          });
        }

        reject(res);
      }
    });
  });
};

export default ICCardObj;

把ICCardAjax绑定到vue原型链上供各组件使用：

import ICCardAjax from "@/assets/js/ICCard.js";
Vue.prototype.ICCardAjax = ICCardAjax;

组件中使用：

    //读卡-查询
    readICCard() {
      return new Promise((resolve, rej) => {
        this.ICCardAjax.ajax("read", {}, this)
          .then(res => {
            resolve(res);
            //读卡成功
            ...
          })
          .catch(res => {
            rej(res);
            ...
         //读卡失败
          });
      });
    },

   writeCard(data) {
      return new Promise((resolve, rej) => {
        this.ICCardAjax.ajax("writeCard", { param: data }, this)
          .then(res => {
            resolve(res);
            console.log("写卡成功");
          })
          .catch(res => {
            rej(res);
            this.$message({
              message: "写卡失败",
              type: "error"
            });
          });
      });
    },

    //写个卡
    querySubmit() {
     this.writeCard([
                {
                  Id: 4,
                  Number: 111
                },
                 { 
                  Id: 4,
                  Number:222
                },
                 { 
                  Id: 4,
                  Number: 333
                }
                  ]).then(res => {
                this.$message({
                  message: "写查询卡成功！",
                  type: "success"
                });
                this.readICCard();
              });
    },

```