首页/ 填坑/ 文章详情

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

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方式请查看相关文档引入。

相关资料:

Vue.js官网 
Element UI
GitHup axios模块库
GitHup Qs模块库

文章评论0 records

最新 最早

0

最新评论Latest comments

HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)
HentaiCatHentaiCat 2020-11-02 15:28
(ಡωಡ)很实用,直接拿走...