js封装SDK 在VUE、小程序、公众号直接调用js调用后端接口(本文以vue项目为例)

1.封装一个js文件msgSdk.js

注意:需要修改这个请求地址 apiServiceAddress

javascript 复制代码
;(function () {
  if (window.msgSdk) {
    return
  }
  var msgSdk = (function () {
    var m_msgSdk = this
    var apiServiceAddress="http://172.12.14.5:8000"
    this.I_SendHTTPRequest = function (msgApiUrl, methodType,option) {
      let oPromise = new Promise(async function (resolve, reject) {
        let url=apiServiceAddress+msgApiUrl
        $.ajax({
            url: url, // 请求的URL
            method: methodType, // 请求方法,可以是GET、POST、PUT、DELETE等
            data: {...option}, // 发送到服务器的数据
            success: function(data) {
                // 请求成功时的回调函数
                resolve(data)
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 请求失败时的回调函数
                reject(errorThrown)
            }
        });
      })
      return oPromise
    }
    // 站内
    this.M_inStation = function (options) {
      let oPromise = new Promise((resolve, reject) => {
        this.m_ISAPIProtocol
          .station(options)
          .then(
            () => {
              resolve()
            },
            oError => {
              reject(oError)
            }
          )
      })
      return oPromise
    }
    // 小程序
    this.M_miniProject = function (options) {
      let oPromise = new Promise((resolve, reject) => {
        this.m_ISAPIProtocol
          .miniProject(options)
          .then(
            () => {
              resolve()
            },
            oError => {
              reject(oError)
            }
          )
      })
      return oPromise
    }
    // 公众号
    this.M_officialAccount = function (options) {
      let oPromise = new Promise((resolve, reject) => {
        this.m_ISAPIProtocol
          .officialAccount(options)
          .then(
            () => {
              resolve()
            },
            oError => {
              reject(oError)
            }
          )
      })
      return oPromise
    }
    // app
    this.M_App = function (options) {
      let oPromise = new Promise((resolve, reject) => {
        this.m_ISAPIProtocol
          .App(options)
          .then(
            () => {
              resolve()
            },
            oError => {
              reject(oError)
            }
          )
      })
      return oPromise
    }
    // 短信
    this.M_textMessage = function (options) {
      let oPromise = new Promise((resolve, reject) => {
        this.m_ISAPIProtocol
          .textMessage(options)
          .then(
            () => {
              resolve()
            },
            oError => {
              reject(oError)
            }
          )
      })
      return oPromise
    }
    // 企业微信
    this.M_weCom = function (options) {
      let oPromise = new Promise((resolve, reject) => {
        this.m_ISAPIProtocol
          .weCom(options)
          .then(
            () => {
              resolve()
            },
            oError => {
              reject(oError)
            }
          )
      })
      return oPromise
    }
    var ISAPIProtocol = function () {}
    // 站内消息
    ISAPIProtocol.prototype.station = function (options) {
      return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/userCheck?format=json","get",options )
    }
    // 小程序
    ISAPIProtocol.prototype.miniProject = function (options) {
      return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/userCheck?format=json","get",options )
    }
    // 公众号
    ISAPIProtocol.prototype.officialAccount = function (options) {
      return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/userCheck?format=json","get",options )
    }
    // app
    ISAPIProtocol.prototype.App = function (options) {
      return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/userCheck?format=json","get",options )
    }
    // 短信
    ISAPIProtocol.prototype.textMessage = function (options) {
      return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/userCheck?format=json","get",options )
    }
    // 企业微信
    ISAPIProtocol.prototype.weCom = function (options) {
      return m_msgSdk.I_SendHTTPRequest("/ISAPI/Security/weCom?weCom","get",options )
    }
    m_ISAPIProtocol = new ISAPIProtocol()
    return this
  })()
  var NS = (window.msgSdk = msgSdk)
  NS.version = '1.0.0'
})(this)
if ('object' === typeof exports && typeof module !== 'undefined') {
} else if ('function' === typeof define && define.amd) {
  define(function () {
    return msgSdk
  })
} else if ('function' === typeof define && define.cmd) {
  define(function (require, exports, module) {
    module.exports = msgSdk
  })
} else {
}

2.在index.html中引入msgSdk.js文件jquery文件

javascript 复制代码
<script src="./static/js/jquery-1.7.1.min.js"></script>
<script src="./static/js/msgSdk.js"></script>

3.在页面中调用

javascript 复制代码
 mounted() {
    let oDeviceInfo = {
      IP: "http://666",
      Port: "8000",
      Auth: "95484",
    }
    msgSdk.M_weCom(oDeviceInfo).then(
      (data) => {
        console.log(data,"data");
      },
      (error) => {
        console.log(error,"error");
      }
    );
  }
相关推荐
铁皮饭盒32 分钟前
Bun 哪比 Node.js 快?
javascript·后端
JieE2128 小时前
LeetCode 56. 合并区间|超清晰 JS 图解思路,面试高频区间题
javascript·算法·面试
candyTong11 小时前
RTK 技术原理:一次典型会话里,80% 上下文是怎么省下来的
javascript·后端·架构
_柳青杨15 小时前
深入理解 JavaScript 事件循环
前端·javascript
大家的林语冰20 小时前
ES5 凉凉,Babel 8 正式发布,默认不再编译为 ES5 和 CJS......
前端·javascript·前端工程化
weedsfly1 天前
异步编程全景与事件循环——彻底搞懂 JS 执行机制
前端·javascript
用户1733598075371 天前
纯前端 PDF 数字签名实战:Vue 3 + pdf-lib 在浏览器里完成签名嵌入
前端·javascript
JieE2121 天前
LeetCode 226. 翻转二叉树|JS 递归超详细拆解,二叉树入门经典题
javascript·算法
JieE2121 天前
LeetCode 104. 二叉树的最大深度|递归思路超详细拆解
javascript·算法
kyriewen2 天前
我用 AI 一周写完了整个项目,上线第一天就崩了——这是我踩过最贵的 5 个坑
前端·javascript·ai编程