阅读 505

vue+axios+eggjs post请求参数问题之万恶的ctrl+c/v大法

案情

最近呢想用vue+axios+eggjs做一个小东西练练手,碰到一个axios post请求参数没办法被后端获取的问题, 查阅了一下网上的资料呢,解决方法有许多种,当然我得挑选一个最接近自己问题情况的解决办法啦;
大都是以下类似的方法:
1、

2、

好吧!既然找到方法了,也是蛮简单的操作嘛,搞!
以下是我的配置:

ok,调试一下

呵呵~500!难受啊!
如图所示,报文中请求参数都没有,什么鬼啊,看了后台的日志发现确实也没有接收到发送的三个参数

于是又看了几遍自己的配置文件等等,妹毛病啊~,又去网上一通搜,无果;我又用了postman进行数据请求,发现是没有问题的,同样的参数。postman可以请求成功,后端可以拿到参数

下面是后台日志打印:
这个问题就很刁钻了啊,于是我把目光放到了请求时参数处理的这个问题上,在之前查询包括阅览axios文档的时候有看到过transformRequest这个方法,主要是对入参做一些转换处理的;
官方文档解释如下:

是的,妹毛病,我在自己的封装中也用了这个方法,有打印过入参data,发现是结果是我传入的参数,但是为什么经过qs.stringify方法的处理之后就不行了呢,我对data进行了打印并且打印了它的类型,发现是一个string类型,于是我将其转换为object对象格式

经过上述代码处理。惊奇吧般的发现接口通了,后台能够获取到参数了

叼的一~~~~~~~,原来是入参类型变成了string,但是为什么呢,我明明传的是对象进来的啊

呵呵,对不起,对不起,对不起,浪费大家时间了,我~~尼。。。为毛有个JSON.stringify(param)!!!!???

破案

原来这个方法我是从原先一个项目中拷贝过来的,没有在意这里的细节,当时只想着能发出请求就成了,问题肯定在我现在写的代码上面,这一折腾,脑壳疼!
最终的实现方案就是

import axios from 'axios'
import Qs from 'qs'

const service = axios.create({
  baseURL: 'http://127.0.0.1:7001',
  timeout: 1000,
  withCredentials: true,
  transformRequest: [function (data) {
    return Qs.stringify(data)
  }],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' // 默认是application/json形式的,需要设置成现在这样
  }
})
复制代码

结语

上述只是简单的记录了一下自己傻逼的行为导致自残的结果,其实中间还是有很多东西值得研究的,这儿也不多做记录了,以后有机会再详细总结,还有要说的就是平时在coding的过程中难免会碰到相似功能代码,我们可能会直接去拷贝使用,提高效率,在实现相应功能之后,可能不会去认真去看看这段代码的每一个属性、方法是否是当前功能真正需要的,但是如果不在第一时间处理掉这些冗余的代码,可能会引发更严重的问题,比方说其他同事也复制了相关的代码,就像病毒一样传遍许多地方,然后相关这一块的代码后期就没办法维护了,所以不能因为一时的求快,为了完成而完成,实在不可取,与君共勉

关注下面的标签,发现更多相似文章
评论