Vue(二十三)Ajax请求封装

封装cs.js文件

const cs = {
};

(function () {
    // 公司开发环境
    const cfg_dev = {
        api_url: 'http://127.0.0.1:8080',	// 所有ajax请求接口父地址
        web_url: 'http://www.baidu.com'		// 此项目前台地址 (此配置项非必须)
    };
    // 服务器测试环境
    const cfg_test = {
        api_url: 'http://demo-jj.dev33.cn/spdj-server',
        web_url: 'http://www.baidu.com'
    };
    // 正式生产环境
    const cfg_prod = {
        api_url: 'http://www.baidu.com',
        web_url: 'http://www.baidu.com'
    };
    cs.cfg = cfg_dev; // 最终环境 , 上线前请选择正确的环境
})();


(function () {
    //Ajax请求封装
    cs.ajax = function (url, data, success, cfg) {

        // 默认配置
        const defaultCfg = {
            baseUrl: (url.indexOf('http') === 0 ? '' : cs.cfg.api_url),// 父url，拼接在url前面
            sleep: 0,	// 休眠n毫秒处理回调函数
            type: 'post',	// 默认请求类型
            success: success,//代表成功

            fail: function (res) {// 代表失败
                return layer.alert('失败：' + res.msg);
            },
            forbidden: function (res) {		//权限不足
                return layer.alert("权限不足," + res.msg, {icon: 5});
            },
            notLogin: function (res) {		//未登录
                return layer.confirm("您当前暂未登录，是否立即登录？", {}, function () {
                    layer.closeAll();
                    return cs.$page.openLogin(cfg.login_url);
                });
            },
            errorfn: function (xhr, type, errorThrown) {		// ajax发生异常时的默认处理函数
                if (xhr.status === 0) {
                    return layer.alert('无法连接到服务器，请检查网络');
                }
                return layer.alert("异常：" + JSON.stringify(xhr));
            },
            complete: function (xhr, ts) {	// 成功失败都会执行

            }
        };

        // 将调用者的配置和默认配置合并
        cfg = cs.extendJson(cfg, defaultCfg);

        layer.closeAll();	// 开始前先把所有弹窗关了
        layer.msg("努力加载中...", {icon: 16, shade: 0.3, time: 1000 * 20, skin: 'ajax-layer-load' });

        // 开始请求ajax
        return $.ajax({
            url: cfg.baseUrl + url,
            type: cfg.type,
            data: data,
            dataType: 'json',
            // xhrFields: {
            // 	withCredentials: true // 携带跨域cookie
            // },
            // crossDomain: true,
            beforeSend: function (xhr) {
                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                // 追加token
                xhr.setRequestHeader('token', sessionStorage.runAsToken || sessionStorage.token || localStorage.token || '');
            },
            success: function (res) {
                setTimeout(function () {
                    layer.closeAll();
                    //处理不同的状态码
                    if (res.code===200) {
                        return cfg['success'](res);
                    }
                    if (res.code===500) {
                        return cfg['fail'](res);
                    }
                    if (res.code===403) {
                        return cfg['forbidden'](res);
                    }
                    if (res.code===401) {
                        return cfg['notLogin'](res);
                    }
                    layer.alert('未知状态码：' + JSON.stringify(res));
                }, cfg.sleep);
            },
            error: function (xhr, type, errorThrown) {
                setTimeout(function () {
                    layer.closeAll();
                    return cfg.errorfn(xhr, type, errorThrown);
                }, cfg.sleep);
            },
            complete: cfg.complete
        });

    };
    // json合并, 将 defaulet配置项 转移到 user配置项里 并返回 user配置项
    cs.extendJson = function(userOption, defaultOption) {
        if(!userOption) {
            return defaultOption;
        }
        for(var key in defaultOption) {
            if(userOption[key] === undefined) {
                userOption[key] = defaultOption[key];
            } else if(userOption[key] == null){

            } else if(typeof userOption[key] == "object") {
                cs.extendJson(userOption[key], defaultOption[key]); //深度匹配
            }
        }
        return userOption;
    }
})();

入口html中引入

<script src="static/utils/cs.js"></script>

使用

<template>
  <div id="particles">
    <div class="login-box">
      <el-form>
        <el-form-item label="账号">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>
<script>
module.exports = {
  name: 'Login',
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login: function () {
      cs.ajax("/login", this.form, function () {
        layer.msg("登录成功", {icon: 1, time: 2000})
        router.push('/home')
      },null);

    }
  }
}

</script>
<style>
body {
  /*弹性盒子布局：弹性盒子只是规定了弹性子元素如何在弹性容器内布局*/
  display: flex;
  /*子元素横向对齐方式*/
  justify-content: center;
  /*子元素纵向对齐方式*/
  align-items: center;
  /*背景图*/
  background-image: url(../picture/background.jpg);
}

/*登录盒子*/
.login-box {
  /*弹性盒子布局：弹性盒子只是规定了弹性子元素如何在弹性容器内布局*/
  display: flex;
  /*子元素横向对齐方式*/
  justify-content: center;
  /*子元素纵向对齐方式*/
  align-items: center;
  /*盒子大小*/
  width: 300px;
  height: 300px;
  /*背景色*/
  background-color: white;
  /*边框*/
  border-radius: 15px;
  /*轮廓*/
  outline-style: solid;
}


</style>