美文网首页前端让前端飞码农的世界
深陷axios坑中,久久不得爬出,望君莫犯!

深陷axios坑中,久久不得爬出,望君莫犯!

作者: 张培跃 | 来源:发表于2019-04-16 21:12 被阅读16次

本人一生与bug英勇奋战,可谓斩敌无数,双手沾满鲜血,对于bug早已见怪不怪了。怎奈对于一些始料未及,史无前例的另类bug,真是惊呆了我的小伙伴们!

我在使用axios的过程中,遇神坑一个,坑虽不大,但深陷其中并久久不得爬出。在此记录一下,望君莫犯!


一切的一切,都要从axios的transformRequest属性说起…

一、transformRequest的四个特征:

1、可以在向服务器发送请求数据之前,修改请求数据。

2、函数必须要返回一个字符串或 ArrayBuffer或 Stream。

3、该函数只适用于 POST,PUT,PATCH请求方式

4、默认Content-Type值为:application/x-www-form-urlencoded

axios({
    method:"post",
    url:"http://127.0.0.1/sum",
    data:"a=1&b=2",
    transformRequest(data) {
        return data
    }
}).then(data => {
    console.log(data);
})

虽然以上代码运行不会有任何的问题,但作为一名出色的开发者,所考虑的情形一定要全面!

例如,我想修改Content-Type的值为application/json该如何处理?我第一想到的方法便是为其增加headers属性,于是将代码打造为:

axios({
    method:"post",
    url:"http://127.0.0.1/sum",
    data:{
        a:1,
        b:2
    },
    headers:{
        "content-type":"application/json"
    },
    transformRequest(data) {
        return JSON.stringify(data);
    }
}).then(data => {
    console.log(data);
})

经过以上的改造,我成功的让服务器无法接收到请求的数据了!

哎!问题究竟出在哪里?经拷问Network得知,content-type居然变成了下图的惨烈样子!

image

于是乎,我开始尝试各种方法并利用各种搜索引擎来查找问题元凶,无果!

没办法,我现在只能对axios的源码进行阅读了(在此也深感阅读源码的重要性)。

随着时间的消磨推移,终于让我找到了问题的真正原因所在!并思考出三种技术解决方案!嗯,没错!是三种!

二、解决方案一

1、必须,必须,必须要设置请求头!

// 可以通过这种方式给axios设置的默认请求头
axios.defaults.headers = {
    "content-type":"application/json"
}

2、代码修改为:

axios({
    method:"post",
    url:"http://127.0.0.1/sum",
    data:{
        a:1,
        b:2
    },
    transformRequest(data) {
        return JSON.stringify(data);
    }
}).then(data => {
    console.log(data);
})

因为默认值已经设置为json,所以将代码中的headers属性移除掉了。

自此,设置完默认请求头后,我的headers以后便可以任意修改了!

三、解决方案二

注意Content-Type的大小写,大小写,大小写……

代码修改为:

axios({
    method:"post",
    url:"http://127.0.0.1/sum",
    data:{
        a:1,
        b:2
    },
    headers:{
        "Content-Type":"application/json"
    },
    transformRequest(data,headers) {
        return JSON.stringify(data);
    }
}).then(data => {
    console.log(data);
})
四、解决方案三

验证headers属性是否书写规范!

axios({
    method:"post",
    url:"http://127.0.0.1/sum",
    data:{
        a:1,
        b:2
    },
    headers:{
        "Content-Type":"application/json"
    },
    transformRequest(data,headers) {
        let normalizedName = "Content-Type";
        for(var key in headers){
            if(key != normalizedName &&  key.toLowerCase() === normalizedName.toLowerCase()){
                headers[normalizedName] = headers[key];
                delete headers[key];
                break;
            }
        }
        return JSON.stringify(data);
    }
}).then(data => {
    console.log(data);
})
五、小结
这其实是一个书写上的弱智错误,之所以会放在本文中,是因为很多程序员的职业生涯中都有过类似的写!错!经历!main和mian傻傻看不出来!

—————END—————

喜欢本文的朋友们,欢迎关注公众号 张培跃,收看更多精彩内容!!!公众号回复 电子书 ,送你经典电子书籍!

相关文章

  • 深陷axios坑中,久久不得爬出,望君莫犯!

    本人一生与bug英勇奋战,可谓斩敌无数,双手沾满鲜血,对于bug早已见怪不怪了。怎奈对于一些始料未及,史无前例的另...

  • axios学习历程(遇到问题持续更新)

    axios的作用 axios配置文件 axios在使用中的一些坑 作用 axios其实就是vue-resourec...

  • 诉情曲

    妾倾尽情心,望君莫厌弃。 愿将心托付,望君莫相负。

  • 望君莫倾心

    一、 宛素知道,将来史书铁笔,骂名她是背定了,于是新帝登基的朝堂上,她一个头磕下,公然宣告要做贰臣第一。 百官哗然...

  • 情动思依然,心中默念君容颜

    那年夏天,一个不经意的转身,望君在人海中回眸释笑,致使久久不得思忘。夜,独望星空,难释心怀,想君容颜,思其君心,夜...

  • 君莫回首望旧情

    1. 一遍遍的懦弱一遍遍蹂躏着他脆弱的心;一遍遍的把被子一股脑儿蒙在头上;一遍遍的歇斯底里的无声流泪;此时...

  • vue-cli中axios遇到的坑

    经过多次进坑,总结如下 1、安装axios npm install axios axios官方推荐这样安装,但是,...

  • 诗仙FDAⅡ对雪醉后赠王历阳

    唐.李白 有身莫犯飞龙鳞, 有手莫辫猛虎须。 君看昔日汝南市, 白头仙人隐玉壶!

  • 每日新知|如何识别人生最具价值财富

    在你人生历练中,一定经历过一些“坑”。有的坑很深,一旦掉进去,就没可能爬出来;有的坑很浅,掉进去爬出来反倒是好事儿...

  • 影响你一生的三个大坑

    在你的人生中,一定经历过一些“坑”,有得坑很深,一旦掉进去,就没有可能爬出来了;有的坑很浅,掉进去爬出来反倒是好事...

网友评论

    本文标题:深陷axios坑中,久久不得爬出,望君莫犯!

    本文链接:https://www.haomeiwen.com/subject/fiemwqtx.html