axios封装get,post请求， 原生xhr ajax封装同步请求

axios封装， 原生xhr ajax同步请求 封装

axiosUtil.js

(function (_window) {


    const axiosUtil = {};

    /**
     * get请求  异步
     * 参数可以通过mapping 中 增加? a=1&b=2 传递
     * 也可以通过reqData.param传递,会解析json对象拼接到url后面
     * reqData.param={
     *     a:1,
     *     b:2
     * }
     * @param
     * reqData {
     *     "mapping":"",
     *     "callback":function(){},
     *     "scope":this
     * }
     */
    axiosUtil.get = function (reqData) {
        let mapping = reqData.mapping;
        let callback = reqData.callback;
        // let scope=reqData.scope;

        if (myApp.devModel) {
            console.log("get ajax begin reqData:" + JSON.stringify(reqData));
        }

        let url = myApp.getUrl() + mapping;




        if (url.indexOf("?") > 0) {
            url += "×tamp=" + new Date().getTime();
        } else {
            url += "?timestamp=" + new Date().getTime();
        }

        for(let paramKey in reqData.param){
            url+="&"+paramKey+"="+reqData.param[paramKey];
        }


        axios.get(url).then(response => {
           // console.log(response);

            let resData = response.data;
            if (myApp.devModel) {
                console.log("get ajax end resData:" + JSON.stringify(resData));
            }
            callback(resData);
        })
            .catch(function (error) {
                console.log(error);
            });

    }

    /**
     * get请求  同步步
     * 参数可以通过mapping 中 增加? a=1&b=2 传递
     * 也可以通过reqData.param传递,会解析json对象拼接到url后面
     * reqData.param={
     *     a:1,
     *     b:2
     * }
     * @param
     * reqData {
     *     "mapping":"loadDictController/loadSysDict",
     *     "param": param
     *   }
     *   调用    let response=   axiosUtil.syncGet(reqData);
     */
    axiosUtil.syncGet =  function (reqData) {
        let mapping = reqData.mapping;


        if (myApp.devModel) {
            console.log("get ajax begin reqData:" + JSON.stringify(reqData));
        }

        let url = myApp.getUrl() + mapping;

        if (url.indexOf("?") > 0) {
            url += "×tamp=" + new Date().getTime();
        } else {
            url += "?timestamp=" + new Date().getTime();
        }

        for(let paramKey in reqData.param){
            url+="&"+paramKey+"="+reqData.param[paramKey];
        }
        //axios 同步需要 调用的地方 aysnc await 太繁琐 ，改为原生xhr同步请求
       // let response=  axios.get(url);

        let xhr = new XMLHttpRequest();
        xhr.open('GET', url, false);
        xhr.send();
        let response;
        if (xhr.status === 200){
            response=JSON.parse(xhr.responseText)
            console.log(response);
        } else {
            response=null;
            console.log("exec syncGet  error ");
        }
        console.log("syncGet-->response",response);
        return response;

    }

    /**
     * post 请求application/json 异步
     * @param reqData
     * reqData {
     *     "mapping":"",
     *     "param":{
     *       firstName: 'Fred',
     *       lastName: 'Flintstone'
     *      },
     *     "callback":function(){},
     *      //errorCallback  可选 一般只有在进到catch时 需要重置按钮状态时才传入，正常情况只要传入callback即可
     *      "errorCallback":function(){}
     *     "scope":this
     * }
     *
     * 调用 ：	axiosUtil.post(reqData);
     */
    axiosUtil.post = function (reqData) {
        let mapping = reqData.mapping;
        let param = reqData.param;
        let callback = reqData.callback;
        let errorCallback = reqData.errorCallback;
        // let scope=reqData.scope;

        if (myApp.devModel) {
            console.log("post ajax begin reqData:" + JSON.stringify(reqData));
        }

        axios.post(myApp.getUrl() + mapping, param).then(response => {


            let resData = response.data;
            if (myApp.devModel) {
                console.log("post ajax end resData:" + JSON.stringify(resData));
            }
            callback(resData);
        }).catch(function (error) {
            if (errorCallback) {
                errorCallback();
            }
            console.log(error);
        });


    }
    _window.axiosUtil = axiosUtil;
})(window)

basicServer.js 封装获取字典同步服务，加载机构树形异步服务

loadOrgTreeData 函数为异步方法，通过callback回调实现，ajax返回后在渲染数
loadSysDict 函数为同步函数，顺序执行

/**
 * 封装基础服务调用方法
 * 如获取机构数形格式数据 获取字典 获取参数等需要与后台交互等方法封装
 *
 * 需要在myApp.js axiosUtil.js 之后引入
 */

/**
 * 封装一些工具类方法
 */
(function (_window) {


    const basicServer = {};

    /**
     * 取机构数形格式数据
     * @param param 参数 {} json格式
     * @param callback 成功获取到机构数后的执行的方法,如渲染树形 如获取失败不执行
     * @param scope 作用域 一般传入this
     */
    basicServer.loadOrgTreeData = function (param, callback, scope) {
        //console.log("loadOrgTreeData",param)
        let reqData = {
            "mapping": "treeCompController/loadOrgTreeData",
            "param": {},
            "callback": resData => {

                if (resData.code != 200) {
                    this.$message.error(myApp.getErrorMessage(resData));
                    return;
                }

                callback(resData, scope);

            }


        }
        axiosUtil.get(reqData);

    };


    /**
     * 获取 sys_dict字典
     * @param param 参数
     * 如{"dictClass":"systemManager:menuManager:menuTarget"} json格式
     * 或者只传递 dictClass 字符串格式
     *
     * 调用 : let menuTargetDict=basicServer.loadSysDict("systemManager:menuManager:menuTarget")
     *
     */
    basicServer.loadSysDict =  function (param) {
        //console.log("loadOrgTreeData",param)
        if(typeof  param=='string'){
            param= {"dictClass":param}
        }
        let reqData = {
            "mapping": "loadDictController/loadSysDict",
            "param": param
         }
        let response=   axiosUtil.syncGet(reqData);
        if (response==null||response.code != 200) {
            console.log("exec loadSysDict  error :"+myApp.getErrorMessage(response));
            this.$message.error(myApp.getErrorMessage(response));
            return null;
        }
        console.log("loadSysDict-->response.data",response.data);
        return response.data;

    };

    _window.basicServer = basicServer;
})(window)

html引入资源

axios版本:/* axios v0.27.2 | © 2022 by Matt Zabriskie */

  <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="icon" href="/favicon.ico">
        <title th:text="${application.sysParamConfig.systemName}">体检title>
     	<link rel="stylesheet" href="static/css/element-ui-2-15-9-index.css" />
        <script src="static/js/axios-min.js">script>
		<script src="static/js/vue-2-6-14.js">script>
        <script src="static/js/element-ui-2-15-9-index.js">script>
		<script src="static/js/myApp.js">script>
        <script src="static/js/axiosUtil.js">script>
		<script src="static/js/basicServer.js">script>
	head>