首页/ 填坑/ 文章详情

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

相关资料:

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

文章评论0 records

最新 最早

0

最新评论Latest comments

凡心的仙人凡心的仙人 03-18 14:35
谢谢你了!
rantrismrantrism 2023-04-03 11:27
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
唐牛才是食神唐牛才是食神 2022-06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 2022-06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 2022-02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!