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

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

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

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

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

一、transformRequest的四个特征:

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

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

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

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

 
 
  1. axios({

  2.     method:"post",

  3.     url:"http://127.0.0.1/sum",

  4.     data:"a=1&b=2",

  5. transformRequest(data) {

  6. return data

  7. }

  8. }).then(data => {

  9. console.log(data);

  10. })

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

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

 
 
  1. axios({

  2.     method:"post",

  3.     url:"http://127.0.0.1/sum",

  4.     data:{

  5.         a:1,

  6.         b:2

  7. },

  8.     headers:{

  9. "content-type":"application/json"

  10. },

  11. transformRequest(data) {

  12. return JSON.stringify(data);

  13. }

  14. }).then(data => {

  15. console.log(data);

  16. })

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

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

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

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

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

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

三、解决方案一

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

 
 
  1. // 可以通过这种方式给axios设置的默认请求头

  2. axios.defaults.headers = {

  3. "content-type":"application/json"

  4. }

2、代码修改为:

 
 
  1. axios({

  2.     method:"post",

  3.     url:"http://127.0.0.1/sum",

  4.     data:{

  5.         a:1,

  6.         b:2

  7. },

  8. transformRequest(data) {

  9. return JSON.stringify(data);

  10. }

  11. }).then(data => {

  12. console.log(data);

  13. })

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

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

四、解决方案二

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

代码修改为:

 
 
  1. axios({

  2.     method:"post",

  3.     url:"http://127.0.0.1/sum",

  4.     data:{

  5.         a:1,

  6.         b:2

  7. },

  8.     headers:{

  9. "Content-Type":"application/json"

  10. },

  11. transformRequest(data,headers) {

  12. return JSON.stringify(data);

  13. }

  14. }).then(data => {

  15. console.log(data);

  16. })

五、解决方案三

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

 
 
  1. axios({

  2.     method:"post",

  3.     url:"http://127.0.0.1/sum",

  4.     data:{

  5.         a:1,

  6.         b:2

  7. },

  8.     headers:{

  9. "Content-Type":"application/json"

  10. },

  11. transformRequest(data,headers) {

  12. let normalizedName = "Content-Type";

  13. for(var key in headers){

  14. if(key != normalizedName &&  key.toLowerCase() === normalizedName.toLowerCase()){

  15. headers[normalizedName] = headers[key];

  16. delete headers[key];

  17. break;

  18. }

  19. }

  20. return JSON.stringify(data);

  21. }

  22. }).then(data => {

  23. console.log(data);

  24. })

六、小结
这其实是一个书写上的弱智错误,之所以会放在本文中,是因为很多程序员的职业生涯中都有过类似的写!错!经历!main和mian傻傻看不出来!

—————END—————

喜欢本文的朋友们,欢迎长按下图关注公众号 

张培跃,收看更多精彩内容

深陷axios坑中,久久不得爬出,望君莫犯!》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:http://www.hashtobe.com/3985.html