关于javascript:前端javascript封装SDK-简易版

** 因为我不确定中台在应用时，有没有 axios 之类的依赖库，
所以在 sdk 外部封装了 ajax。尽量做到一处封装，处处可用。**

unicomMiddle.js

/*
 * @Author: yang
 * @Date: 2020-09-08 10:13:32
 * @LastEditors: yang
 * @LastEditTime: 2020-09-08 16:53:24
 * @FilePath: \vuex\src\components\unicomMiddle.js
 */
var unicomMiddle = {
    /**
 * 创立 Ajax
 * @param options
 */
   Ajax(options) {
    // 新建一个对象，用处承受 XHR 对象
    var xhr = null;
  
    // 第一步创立 XMLHttpRequest 对象 || 同时专任 IE
    // 首先检测原生 XHR 对象是否存在，如果存在则返回它的新实例
    if (typeof XMLHttpRequest != "undefined") {xhr = new XMLHttpRequest();
  
      // 而后如果原生对象不存在，则检测 ActiveX 对象
    } else if (typeof ActiveXObject != "undefined") {
  
      // 如果存在, 则创立他的对象, 但这个对象须要一个传入参数, 如下:
      if (typeof arguments.callee.activeXString != 'string') {
        // 对象版本
        var versions = [
          'Microsoft.XMLHTTP',
          'Msxml2.XMLHTTP.7.0',
          'Msxml2.XMLHTTP.6.0',
          'Msxml2.XMLHTTP.5.0',
          'Msxml2.XMLHTTP.4.0',
          'MSXML2.XMLHTTP.3.0',
          'MSXML.XMLHTTP'
        ], i, len;
  
        for (i = 0, len = versions.length; i < len; i++) {
          try {
            // 须要 versions 数组中的某个项, 数组的 7 个项别离对应 7 个版本.
            new ActiveXObject(versions[i]);
  
            // arguments 是 javascript 函数的内置对象, 代表传入参数的汇合，// callee 就代表对象自身即 new createXHR
            arguments.callee.activeXString = versions[i];
            break;
  
          } catch (e) {// 跳过}
        }
      }
      // 直到循环创立胜利为止, 而后给本人增加一个属性叫 activeXString
      xhr = new ActiveXObject(arguments.callee.activeXString);
  
    } else {
      // 如果这两种对象都不存在，就抛出一个谬误
      throw new Error('No XHR object available');
    }
  
    /**
     ** options 形参解析：* data 发送的参数，格局为对象类型
     * url 发送申请的 url，服务器地址（api）* async 否为异步申请，true 为异步的，false 为同步的
     * method http 连贯的形式，包含 POST 和 GET 两种形式
     */
    options = options || {};
    options.success = options.success || function () {};
    options.fail = options.fail || function () {};
  
    var data = options.data,
         url = options.url,
         async = options.async === undefined ? true : options.async,
         method = options.method.toUpperCase(),
         dataArr = [];
  
    // 遍历参数
    for (var k in data) {dataArr.push(k + '=' + data[k]);
    }
  
    // GET 申请
    if (method === 'GET') {url = url + '?' + dataArr.join('&');
      xhr.open(method, url.replace(/\?$/g, ''), async);
      xhr.send();}
  
    // POST 申请
    if (method === 'POST') {xhr.open(method, url, async);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(dataArr.join('&'));
    }
  
    // 响应接管结束后将触发 load 事件
    xhr.onload = function () {
  
      /**
       * XHR 对象的 readyState 属性
       * 0：未初始化。尚未调用 open() 办法。* 1：启动。曾经调用 open() 办法，但尚未调用 send() 办法。* 2：发送。曾经调用 send() 办法，但尚未接管到响应。* 3：接管。曾经接管到局部响应数据。* 4：实现。曾经接管到全副响应数据，而且曾经能够在客户端应用了。*/
      if (xhr.readyState == 4) {
        // 失去响应
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
          // 解决胜利数据
          var res;
          if (options.success && options.success instanceof Function) {
            res = xhr.responseText;
            if (typeof res === 'string') {res = JSON.parse(res);
              options.success.call(xhr, res);
            }
          }
        } else {
          // 处理错误数据
          if (options.fail && options.fail instanceof Function) {options.fail.call(xhr, res)
          }
        }
  
      } else {
        // 抛出检测 XHR 对象的 readyState 属性
        console.log('XHR was readyState：', xhr.readyState);
      }
    }
  },
  getMsgCode(obj){let url = `http://**/**/cuauth/smscode?mobile=${obj.tel}&clientId=${obj.clientId}&smsType=1`
     return new Promise((resolve,reject)=>{
        this.Ajax({
            url: url,
            method: 'GET',
            async: true,
            success: function (res) {// console.log('successful', res);
              resolve(res)
            },
            fail: function (err) {console.log('fail', err);
              reject(err)
            }
          })
     })
    },
    getCodeLogin(obj){let url = `http://*****/**/**/smslogin?clientId=${obj.clientId}&mobile=${obj.tel}&code=${obj.captcha}&appType=2&redirectUrl=${obj.redirectUrl}`
        return new Promise((resolve,reject)=>{
            this.Ajax({
                url: url,
                method: 'GET',
                async: true,
                success: function (res) {//  console.log('登录胜利，行将跳转能力平台!')
                 if(res.code==200&&obj.redirectUrl){window.location.href = obj.redirectUrl}
                 resolve(res)
                },
                fail: function (err) {console.log('fail', err);
                  reject(err)
                }
              })
        })
        
    }
}
 
export default unicomMiddle

应用

import unicomMiddle from './unicomMiddle.js'
export default {
  methods: {async getCode() {
      let parm = {
        tel: '17521077157',
        clientId: 'hfgo',
      }
       let result = await unicomMiddle.getMsgCode(parm)
      console.log(result)
    },
    async getLogin(){
       let parms = {
        tel: '17521077157',
        clientId: '**',
        captcha:'575356',
        redirectUrl:'http://www.baidu.com'
      }
      unicomMiddle.getCodeLogin(parms).then(res=>{console.log(res)//{code: 200, msg: "短信登录胜利."}  code:200 代表登录胜利
      })
     
    }
  },
}
</script>

API