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");
      }
    );
  }
相关推荐
一只小风华~几秒前
学习笔记:Vue Router 中的链接匹配机制与样式控制
前端·javascript·vue.js·笔记·学习·ecmascript
uhakadotcom23 分钟前
在chrome浏览器插件之中,options.html和options.js常用来做什么事情
前端·javascript·面试
西瓜树枝27 分钟前
Chrome 扩展开发从入门到实践:以 Cookie 跨页提取工具为例,拆解核心模块与交互逻辑
前端·javascript·chrome
冰糖雪梨dd38 分钟前
JS中new的过程发生了什么
开发语言·javascript·原型模式
小帆聊前端1 小时前
Lodash 深度解读:前端数据处理的效率利器,从用法到原理全拆解
前端·javascript
FuckPatience2 小时前
前端Vue 后端ASP.NET Core WebApi 本地调试交互过程
前端·vue.js·asp.net
一枚前端小能手2 小时前
🔍 那些不为人知但是好用的JS小秘密
前端·javascript
2501_915921432 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915921432 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
北城以北88882 小时前
Vue-- Axios 交互(二)
javascript·vue.js·交互