Vue axios 请求API接口：获取不到参数的那些事

Vue Axios Javascript Ajax API 异步请求发布于 2021-04-20

Vue响应式，Jquery佬表示不服，用之，真香警告。Vue正如它介绍所说，在背后做了大量的工作，再结合饿了么Element UI。前端人员完完全全站在巨人肩膀上，开发一个小型的管理项目，溜得不能再溜了。

顺应时代潮流，全静态页面+API接口成了日常主流开发，完完全全全剥离了服务器语言的限制，前端人员可以更专注前端的代码开发，Vue axios变成了表示层与数据访问层沟通的桥梁。在Jquery佬眼里，只是将Jquery里的ajax换成axios，名字不一样，思路照旧。

Javascript ajax 版：

JS/**
 * 请求
 * @method response
 * @param {Object} object
 */
var response= function (object) {
    var url = object.url;
    var data = object.data;
    var type = object.type || 'post';
    var sCallback = object.success;
    var eCallback = object.error;
    var cCallback = object.complete;

    $.ajax({type: type,url: url, data: data, dataType: 'json',timeout: 180000,success:function (result) {
        if(typeof sCallback === "function") {
            sCallback(result);
        }
    }, error: function (result) {
        if(typeof eCallback === "function") {
            eCallback(result);
        }
    },  complete: function (XMLHttpRequest, status) { //当请求完成时调用函数
        if (status == 'timeout') {
            alert('网络不稳定,请求超时','center');
            return false;
        }

        if(typeof cCallback === "function") {
            cCallback();
        }
    }});
}

Vue axios 版：

JS/**
 * 请求
 * @method response
 * @param {Object} object
 */
var response = function (object) {
    var url = object.url;
    var data = object.data || {};
    var params = object.params || {}
    var method = object.method || 'post';
    var sCallback = object.success;
    var eCallback = object.error;
    var headers = {"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}
    axios({method:method, url:url, params: params, data: window.Qs.stringify(data),timeout: 180000, headers: headers}).then(function(response) {
        if(typeof sCallback === "function") {
            sCallback(response.data);
        }
    }).catch(function (error){
        if(typeof eCallback === "function") {
            eCallback(error);
        }
    })
}

Vue axios 与 Javascript ajax 看似相差不大，需要的参数大同少异，在这里Jquery佬容易陷入经验主义的坑里：ajax 有定义headers的参数，不过基本可以忽略无须声名。但在axios里，参数以post方式的传递，需要提前定义header参数，不然服务端无法获取到参数。

JSvar headers = {"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}

如果你以为到了这里，打通了所有的关节，那就是大错特错了。在控制台，可以查看到传递的data参数名挤成一团，后台服务器获取不到对应的参数名数据。为了修复该问题，额外引入Qs模块，字符串化后才传递参数。

JSvar data = window.Qs.stringify(data);

Vue 搭建异步请求数据，相比Jquery需要额外引入Axios模块和Qs模块，不像Jquery的ajax干净利略，直接整合在一起。异致使用Vue axios像挤牙膏，用一点，挤一点；发现一点，修补一点，尴尬体验。

※ 以上使用的JS资源以script方式引入，需要npm方式请查看相关文档引入。